Design systems live or die by consistency. A brand colour, a spacing scale, a type size: each of these is defined once, given a name, and reused everywhere, so that a button on one page matches a button on another, and a developer, a designer and a marketing tool all mean the same thing when they refer to the same value. Those named, reusable values are called design tokens. The idea is simple and powerful, but it runs into a practical problem immediately: different tools speak different languages for the same value. A designer works in hex colours, a developer's stylesheet may need RGB values for transparency, and a spacing scale defined in pixels must often be expressed in rem units for accessibility. A token that cannot be translated between those languages is a token that will be retyped, mistyped, and eventually duplicated into inconsistency.
The Design Token Converter performs two of the most common translations. You enter a hex colour and a pixel size, and it returns the colour's RGB values, the size in rem units, and a ready-to-paste CSS variable. That combination — colour and size together, with a CSS variable as the output — reflects how tokens are actually used: not as isolated numbers, but as named values pasted into a stylesheet where they will be reused.
How the tool works
A hex colour is a six-digit code, preceded by a hash sign, that encodes the red, green and blue components of a colour as hexadecimal numbers. Each pair of digits represents one channel, from 00 (none of that colour) to FF (the maximum). Converting to RGB means translating each pair from hexadecimal to decimal, giving three numbers from 0 to 255. The RGB form is useful because it is the form that accepts an alpha, or transparency, value: a colour expressed as RGB can be made semi-transparent by adding a fourth number, which is essential for overlays, shadows and hover states.
A pixel size converts to rem units by dividing by the root font size, which is conventionally 16 pixels in browsers. The rem unit, short for "root em", is relative to that root size, so a size of 16 pixels is 1rem, 24 pixels is 1.5rem, and 8 pixels is 0.5rem. The advantage of rem over pixels is accessibility: if a user increases their browser's default font size, rem-based sizes scale with it, while pixel-based sizes do not. A spacing scale or type scale expressed in rem therefore respects user preferences in a way that a pixel scale cannot.
The CSS variable output ties the two conversions together. A variable such as a named colour or spacing value, defined once at the root of a stylesheet and referenced everywhere else, is the practical implementation of a design token in CSS. Change the variable's value once, and every component using it updates. The converter's ready-to-paste variable removes the transcription step where errors usually enter: a mistyped hex digit or a wrongly divided rem value, copied into a stylesheet and then reused everywhere, is an inconsistency multiplied across a whole site.
A worked example
Take a sample brand colour with the hex code #0F766E, a deep teal. Convert each pair of digits from hexadecimal to decimal. The first pair, 0F, is 0 times 16 plus 15, which is 15: that is the red channel. The second pair, 76, is 7 times 16 plus 6, which is 112 plus 6, which is 118: that is the green channel. The third pair, 6E, is 6 times 16 plus 14, which is 96 plus 14, which is 110: that is the blue channel. The RGB form is therefore 15, 118, 110. Check the direction of the result: red is low, green and blue are moderate and roughly balanced, which matches a deep teal — a colour with little red and a green-blue character. If the red channel had come out high, that would signal an error in the conversion.
Now take a sample spacing value of 24 pixels. With a root font size of 16 pixels, the rem value is 24 divided by 16, which is 1.5rem. A second value, 16 pixels, converts to 16 divided by 16, which is 1rem. A third, 8 pixels, converts to 8 divided by 16, which is 0.5rem. Notice the pattern: the pixel values 8, 16 and 24 form a simple spacing scale, and their rem equivalents — 0.5rem, 1rem and 1.5rem — preserve the same proportions while gaining the accessibility benefit of scaling with the user's font size preference.
The converter's CSS variable output for these values would define the colour and the spacing under names you choose, ready to paste into a stylesheet. From then on, components refer to the variable names rather than to the raw numbers, which means a future brand refresh changes one definition instead of dozens of scattered values. That single point of change is the entire promise of design tokens, and the converter exists to make the first step — getting the values right in every format — as frictionless as possible.
Common mistakes
The first mistake is converting with the wrong root font size. The rem calculation divides by the root size, and if a project has changed its root size from the conventional 16 pixels to something else, every rem value derived from 16 will be wrong. Confirm your project's root size before converting, and state it alongside the token so that future converters use the same base.
The second mistake is treating hex and RGB as different colours. They are the same colour in different notations, and converting between them should never change the colour itself. If a converted colour looks different from the original, the conversion is wrong, not the colour: recheck each hexadecimal pair, because a single mistyped digit — a 6 for a 0, an E for an F — shifts a channel noticeably.
The third mistake is defining tokens in one place and values in another. A design system fails when the stylesheet uses a variable for the brand colour but hard-coded pixel values for spacing, or vice versa. Tokens work as a system: define colours, spacing, type sizes and radii as variables together, and refer to variables everywhere. A half-tokenised system is barely better than none, because the hard-coded values drift while the variables stay fixed.
The fourth mistake is naming tokens by their value rather than their role. A token named after its colour, such as "teal-dark", breaks when the brand colour changes to blue; a token named by its role, such as "brand-primary", survives the change. The converter outputs values, not names, so choose role-based names when you paste its output into your stylesheet, and your tokens will outlast the specific values they currently hold.
Honest limitations
The converter handles one colour and one size at a time. A full design system contains dozens or hundreds of tokens, and converting them one by one is slow; for a whole system, a dedicated token pipeline or a design tool's export is more appropriate. The converter also assumes the conventional 16-pixel root size unless you adjust for your project, and it cannot know your project's naming conventions, its component structure, or whether a token should be global or scoped to a particular theme. It translates values accurately; the architecture of your token system remains your design decision.
Closing
Convert hex to RGB pair by pair, divide pixels by the root size for rem, paste the result as a named CSS variable, and name that variable by its role rather than its value. To convert colours to other formats, try the Colour Converter, and to pick exact shades for new tokens, see the Color Code Picker. For keeping colour choices readable for everyone who uses your system, read Charts Everyone Can Read: Colour, Labels, and Accessibility.