{
  "title": "PX to REM converter",
  "human_url": "https://happytails.ai/en/design-tools/px-to-rem/",
  "agent_url": "https://happytails.ai/agents/en/design-tools/px-to-rem/",
  "language": "en",
  "markdown_url": "https://happytails.ai/en/design-tools/px-to-rem.md",
  "content": "PX to REM converter\nConvert CSS pixels and rem units in either direction.\nHow can we improve this tool?\nReport a problem or share an idea.\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\nHow to use PX to REM converter\nEnter the values you want to calculate and choose the relevant units or settings.\nThe result updates as you type. Adjust the available settings if needed.\nReview the result, then use Copy result or a download link when available.\nUseful next steps\nContrast checker\nAspect ratio calculator\nHow to use it\nEnter a value and the root font size. Choose Pixels to rem or Rem to pixels. The default root size is 16px, but you can match your project's CSS.\nA worked example\nAt a 16px root, 24px equals 1.5rem. In the reverse direction, 2rem equals 32px.\nWhat to know\nA rem unit is relative to the root element's font size, not the parent element. This calculator does not inspect a webpage or convert em units. Negative values are accepted for properties that support them.",
  "content_format": "text/plain",
  "visibility": "public",
  "links": [
    {
      "name": "Contrast checker",
      "url": "https://happytails.ai/en/design-tools/contrast-checker/"
    },
    {
      "name": "Aspect ratio calculator",
      "url": "https://happytails.ai/en/design-tools/aspect-ratio-calculator/"
    }
  ],
  "tool": {
    "id": "px-to-rem",
    "category": "design-tools",
    "built": true,
    "requirements": "A rem unit is relative to the root element's font size, not the parent element. This calculator does not inspect a webpage or convert em units. Negative values are accepted for properties that support them.",
    "implementation": {
      "fields": [
        {
          "key": "value",
          "label": "Value",
          "value": 24,
          "type": "number",
          "min": -1000000,
          "max": 1000000,
          "step": "any"
        },
        {
          "key": "root",
          "label": "Root font size (px)",
          "value": 16,
          "type": "number",
          "min": 0.01,
          "max": 1000,
          "step": "any"
        },
        {
          "key": "direction",
          "label": "Conversion",
          "value": "Pixels to rem",
          "type": "select",
          "values": [
            "Pixels to rem",
            "Rem to pixels"
          ]
        }
      ],
      "input": false,
      "live": true,
      "presentation": "metrics",
      "note": "rem units use the root element’s font size. The default is 16px, but your CSS can set a different value. This also converts rem back to pixels.",
      "experience": {
        "automatic": true,
        "single": false,
        "inputMaxLength": 1000000,
        "inputMode": "text",
        "label": "Your text",
        "placeholder": "Type or paste your input…",
        "help": "Change the input or settings to update your result. Results update as you type. Up to 1,000,000 characters.",
        "action": null
      },
      "mode": "automatic",
      "interactive": false
    },
    "execution": "Browser interface",
    "api": null,
    "browser_agent": {
      "supported": true,
      "name": "run_current_tool",
      "discovery": "WebMCP on the human page in a supporting browser",
      "verification": "See audit/API-AUDIT.md; availability is not verification"
    }
  },
  "markdown": "# PX to REM converter\n\n- Human page: https://happytails.ai/en/design-tools/px-to-rem/\n- Markdown: https://happytails.ai/en/design-tools/px-to-rem.md\n- Structured JSON: https://happytails.ai/agents/en/design-tools/px-to-rem/index.json\n- Visibility: public\n\n## Tool capabilities\n\n| Property | Value |\n| --- | --- |\n| Tool ID | `px-to-rem` |\n| Category | design-tools |\n| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |\n| Browser execution | Automatic updates after valid input or file selection. |\n| Browser processing | Browser; see tool notes for network behavior. |\n| HTTP API | Not callable through HTTP. |\n| Browser-agent interface | run_current_tool |\n\n### Implementation notes\n\nrem units use the root element’s font size. The default is 16px, but your CSS can set a different value. This also converts rem back to pixels.\n\n### Inputs and settings\n\nNo free-text input is required. Use the file inputs and/or settings below.\n\n| Setting | Meaning | Control type | Default | Constraints |\n| --- | --- | --- | --- | --- |\n| `value` | Value | number | 24 | min=-1000000 max=1000000 step=any |\n| `root` | Root font size (px) | number | 16 | min=0.01 max=1000 step=any |\n| `direction` | Conversion | select | \"Pixels to rem\" | Allowed: Pixels to rem, Rem to pixels |\n\n### Browser-agent workflow\n\n1. Open the human page in a browser that supports WebMCP.\n2. Discover the interface exposed by that page; use its actual schema.\n3. Select files on the page first when the tool requires files.\n4. Call `run_current_tool` with valid input and settings.\n5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.\n\nCalls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.\n\n### Planning specification\n\nA rem unit is relative to the root element's font size, not the parent element. This calculator does not inspect a webpage or convert em units. Negative values are accepted for properties that support them.\n\nThis describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.\n\n### Complete machine-readable capability record\n\n```json\n{\n  \"id\": \"px-to-rem\",\n  \"category\": \"design-tools\",\n  \"built\": true,\n  \"requirements\": \"A rem unit is relative to the root element's font size, not the parent element. This calculator does not inspect a webpage or convert em units. Negative values are accepted for properties that support them.\",\n  \"implementation\": {\n    \"fields\": [\n      {\n        \"key\": \"value\",\n        \"label\": \"Value\",\n        \"value\": 24,\n        \"type\": \"number\",\n        \"min\": -1000000,\n        \"max\": 1000000,\n        \"step\": \"any\"\n      },\n      {\n        \"key\": \"root\",\n        \"label\": \"Root font size (px)\",\n        \"value\": 16,\n        \"type\": \"number\",\n        \"min\": 0.01,\n        \"max\": 1000,\n        \"step\": \"any\"\n      },\n      {\n        \"key\": \"direction\",\n        \"label\": \"Conversion\",\n        \"value\": \"Pixels to rem\",\n        \"type\": \"select\",\n        \"values\": [\n          \"Pixels to rem\",\n          \"Rem to pixels\"\n        ]\n      }\n    ],\n    \"input\": false,\n    \"live\": true,\n    \"presentation\": \"metrics\",\n    \"note\": \"rem units use the root element’s font size. The default is 16px, but your CSS can set a different value. This also converts rem back to pixels.\",\n    \"experience\": {\n      \"automatic\": true,\n      \"single\": false,\n      \"inputMaxLength\": 1000000,\n      \"inputMode\": \"text\",\n      \"label\": \"Your text\",\n      \"placeholder\": \"Type or paste your input…\",\n      \"help\": \"Change the input or settings to update your result. Results update as you type. Up to 1,000,000 characters.\",\n      \"action\": null\n    },\n    \"mode\": \"automatic\",\n    \"interactive\": false\n  },\n  \"execution\": \"Browser interface\",\n  \"api\": null,\n  \"browser_agent\": {\n    \"supported\": true,\n    \"name\": \"run_current_tool\",\n    \"discovery\": \"WebMCP on the human page in a supporting browser\",\n    \"verification\": \"See audit/API-AUDIT.md; availability is not verification\"\n  }\n}\n```\n\n## Page guide\n\nConvert CSS pixels and rem units in either direction.\n\nHow can we improve this tool?\n\nReport a problem or share an idea.\n\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\n\n### How to use PX to REM converter\n\n1. Enter the values you want to calculate and choose the relevant units or settings.\n2. The result updates as you type. Adjust the available settings if needed.\n3. Review the result, then use Copy result or a download link when available.\n\n## Useful next steps\n\n- [Contrast checker](https://happytails.ai/en/design-tools/contrast-checker/) ([Markdown](https://happytails.ai/en/design-tools/contrast-checker.md))\n\n- [Aspect ratio calculator](https://happytails.ai/en/design-tools/aspect-ratio-calculator/) ([Markdown](https://happytails.ai/en/design-tools/aspect-ratio-calculator.md))\n\n## How to use it\n\nEnter a value and the root font size. Choose Pixels to rem or Rem to pixels. The default root size is 16px, but you can match your project's CSS.\n\n### A worked example\n\nAt a 16px root, 24px equals 1.5rem. In the reverse direction, 2rem equals 32px.\n\n### What to know\n\nA rem unit is relative to the root element's font size, not the parent element. This calculator does not inspect a webpage or convert em units. Negative values are accepted for properties that support them.\n"
}