UtilibyHEX codes and colour names in plain words
Every colour on a screen is a mix of red, green and blue light. A HEX code writes that mix as six characters after a # sign, two for each colour. In #DC143C, the pairs are DC (red), 14 (green) and 3C (blue). In everyday numbers that is rgb(220, 20, 60). Both describe exactly the same colour.
A colour name is different. Crimson, Coral and Cerulean are labels that people use to describe colours. Some names are official in CSS, but most are conventions, and different lists contain different names. That is why this guide treats the code as the precise value and the name as a helpful description.
Below are three ways to get a code (from your screen, from an image, or from a value you already have) and then how to turn it into a name.
Method 1: pick a colour from your screen or a website
Use this when the colour is already visible, for example on a website, in a PDF, in a design file or in a video frame.
- Open the Color Picker in Chrome, Edge or Opera.
- Press Pick from screen. The browser shows a magnifier.
- Click the colour you want. It can be in another tab or another window.
- Copy the code you need from the list of formats: HEX, RGB, HSL, CMYK and more.
This uses the browser's EyeDropper feature, so no extension is needed. The browser hands the page only the colour you clicked and not a picture of your screen. In browsers without the feature, the button is disabled. In that case, use Method 2 with a screenshot.
Method 2: pick a colour from a photo or screenshot
- Open the Image Color Picker and upload your photo or screenshot.
- Click a flat area of the colour you want. Zoom in for accuracy.
- Copy the HEX code, or extract a palette if you want several colours at once.
Photos are noisy. Shadows, highlights and compression change individual pixels, so two nearby points can give different codes. Click several spots and choose the one that represents the colour best, or use an average where the tool offers it.
Method 3: start from a code and find its name
Use this when you already have a HEX, RGB or HSL value and want to know what to call it.
- Open the Color Name Identifier.
- Paste your HEX code into the Hex tab, or use the RGB or HSL tab if that is the format you have.
- Read the name next to the swatch. A distance of 0 means an exact match, and a larger number means a close neighbour.
- Look at the similar colours below it if the first name is not what you expected.
To convert one format into another, for example HEX into RGB, use the HEX to RGB converter.
Paste a HEX, RGB or HSL code to see the closest name, similar colours and a contrast check.
HEX, RGB, HSL and RGBA: which to use
| Format | Example | Good for |
|---|---|---|
| HEX | #DC143C | Compact, universal, design handoff |
| RGB | rgb(220, 20, 60) | Code and screens |
| RGBA | rgba(220, 20, 60, 0.8) | Transparency (80 percent opacity here) |
| HSL | hsl(348, 83%, 47%) | Making a colour lighter, darker or less saturated |
All of these describe the same colour. HEX is the most common, RGBA is useful when something needs to be see-through, and HSL is easiest to adjust by hand because lightness is a single number. For a tool that shows all of them at once, with a hue slider and an opacity slider, use the Color Picker.
How colour names are matched
A colour name finder cannot look up your colour in a table of every possible value, because there are about 16.7 million screen colours. Instead it keeps a list of named colours and finds the closest one.
The key question is what "closest" means. Plain RGB distance does not match what people see, because equal RGB steps do not look equally different. Better tools convert colours to CIELAB, a colour space built around human perception, and measure the CIEDE2000 distance. That is what Utiliby's Color Name Identifier does. It compares your colour with a curated list of a little over 1,000 names and shows the closest one, a distance number and four similar names.
Three consequences are worth knowing:
- Most colours get a near neighbour, not an exact name. A distance of 0 only appears when your colour is exactly one in the list.
- Different tools give different names. They use different lists and sometimes different formulas.
- Names are not specifications. A name from a colour tool is not a Pantone, RAL or paint code.
Worked examples
These examples come from the tools themselves, so you can repeat them.
color: crimson; is valid.Using the code in CSS and HTML
Once you have the code, paste it wherever a colour is accepted:
To let visitors choose a colour on your own page, HTML has a built-in control, <input type="color">. It returns a seven-character HEX value such as #dc143c in its value property. In most browsers it has no transparency, and its look varies between browsers and operating systems. If you want a richer picker with more formats, you can embed Utiliby's Color Picker using the embed code on its page.
Store colours as CSS custom properties, for example --brand: #dc143c;, so you can change them in one place.
Check that the colour is readable
A colour is only useful if people can read what is on it. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA. In the examples above, white text on #0369A1 has a ratio of about 5.9:1, white on #DC143C is about 5.0:1, white on #FF7F50 is only about 2.5:1 and black on #FF7F50 is about 8.4:1, so Coral needs dark text. Test your own pairs with the Color Contrast Checker, and use the Color Wheel to find colours that work together.
Do not rely on colour alone to carry meaning. Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, so add text, icons or patterns.
Common mistakes
- Treating a name as a code. Crimson works in CSS, but Majorelle Blue does not.
- Picking from a noisy spot in a photo. Click a flat area, or check several points.
- Trusting one screen. The same code can look different on another device.
- Using CMYK values as final print colours. Ask the printer for a proof.
- Forgetting contrast. A colour you love may be unreadable behind text.
- Mixing formats by hand. Copy codes from a tool instead of retyping them.
Sources and further reading
- MDN Web Docs: EyeDropper API, including browser support.
- MDN Web Docs: input type="color".
- W3C: Understanding SC 1.4.3 Contrast (Minimum).
- W3C: CSS Color Module Level 4, for the CSS colour syntax and named colours.
Frequently asked questions
How do I find the HEX code of a colour on my screen?
Open a colour picker that has a screen eyedropper, such as Utiliby's Color Picker in Chrome or Edge, press Pick from screen and click the colour. The HEX code appears at once, along with RGB, HSL and other formats. If your browser has no eyedropper, take a screenshot and click the pixel in an image colour picker.
How do I find the HEX code of a colour in an image?
Upload the image to an image colour picker and click the spot you want. The tool reads that pixel and shows its code. Click on a flat area of colour, because photos contain noise, shadows and compression that change individual pixels.
How do I find the name of a colour from its HEX code?
Paste the HEX code into a colour name finder. It compares your colour with a list of named colours and shows the closest one. For example, #DC143C is Crimson in Utiliby's Color Name Identifier.
What is a HEX colour code?
A HEX code is a six-character hexadecimal value, written after a # sign, that gives the red, green and blue amounts of a colour in pairs. For example, #DC143C means red DC, green 14 and blue 3C, which is rgb(220, 20, 60).
What is the difference between HEX and RGB?
They describe the same colours in different notation. HEX writes the three channels in base 16, such as #DC143C, and RGB writes them as numbers from 0 to 255, such as rgb(220, 20, 60). You can convert between them without changing the colour.
Which colour format should I use in CSS?
HEX is the most common and is compact. RGB or RGBA is useful when you need transparency, and HSL is handy when you want to make a colour lighter or darker by changing one number. All of them are supported by current browsers, so choose the one that is easiest to maintain.
Why do two tools give different names for the same colour?
Colour names are conventions and every list is different. A colour that sits between two names can be matched to either one, depending on the list and the formula. Use the name as a description and the code as the specification.
Are colour names like Crimson valid in CSS?
Only the standard CSS colour keywords, about 140 of them, work in a stylesheet. Crimson is one. Names such as Majorelle Blue are descriptive and not valid CSS keywords, so use the HEX, RGB or HSL code instead.
Can I pick a colour from a website without an extension?
Yes, in browsers that support the EyeDropper feature, such as Chrome, Edge and Opera. A web page-based colour picker can open the browser's eyedropper and sample any pixel on your screen. In browsers without it, use a screenshot and an image colour picker.
Why does a colour look different on my phone and laptop?
Screens differ in brightness, contrast, colour settings and viewing conditions, so the same code can look slightly different. The code stays the same. For important colours, check them on the devices your audience uses.
Will the colour I pick match a printed colour?
Not necessarily. Screens use RGB light and printers use CMYK ink, so the printed result depends on the printer, paper and profile. A CMYK value from a converter is a starting point. Ask the printer for a proof when exact matching matters.
Is it safe to use colour tools that run in the browser?
Tools that run in your browser process colours and images on your device. Utiliby's colour tools do not upload the images you open or the colours you pick. As with any website, avoid opening sensitive images in a tool unless you are comfortable with how it works.