About the Colortone to HEX Converter
Briefs, mood boards and client emails talk in names. Stylesheets talk in hexadecimal. Somebody has to translate, and doing it by squinting at a colour wheel wastes an hour. Type the names you were given, one per line, and each comes back as an uppercase six digit code with the swatch printed next to it, drawn from a library of 131 tones that covers the earth colours, muted greens and warm neutrals the CSS keyword list never bothered with.
Lookup is deliberately forgiving. Case is ignored, hyphens and extra spaces are stripped, and both spellings of grey are accepted, so slate-gray, Slate Grey and SLATE GRAY all resolve to the same entry. If a name is not in the library the error lists a few entries that begin the same way, which is usually enough to spot the one you meant.
Remember that these are conventional values rather than standardised ones. Terracotta as a pigment covers a range of clays, and the code here represents the middle of the usual span rather than a single official definition, so use it as a solid starting point and nudge it to taste. Once you have a code, Tints and Shades builds a full ramp around it, and HEX to Colortone takes an existing code back to a name.
How to use
- Type or paste tone names, one per line.
- Press Look up to see the swatch and its HEX code.
- Copy the codes straight into your stylesheet or design tokens.
- Adjust the value if your brand needs a warmer or cooler take on the tone.
Common questions
- Does capitalisation matter when I type a name?
- No, names are matched case insensitively and any hyphens or extra spaces are ignored.
- Can I write grey instead of gray?
- Yes, both spellings resolve to the same library entry.
- What happens if the name is not in the library?
- The tool raises an error and suggests a handful of entries beginning with the same letter.
- Are these codes an official standard?
- No, they are the conventional sRGB values usually associated with each name, so treat them as a good starting point.