What is CSS Color Code Generator?

A CSS color code generator that converts any color into every CSS-compatible format: HEX, RGB, RGBA, HSL, HSLA, OKLCH, and CSS named colors. Pick a color visually or enter any format and get all others instantly, plus a WCAG contrast check.

Type a hex code, drag the colour picker, nudge the RGB sliders, or paste an existing rgb() or hsl() string. The tool computes the other formats live, including OKLCH for perceptually even palettes, and looks up the closest CSS named colour (147 entries from the W3C list). Alpha values appear once you move the opacity slider below 100%, so the rgba() and hsla() rows stay clean for opaque colours. A contrast panel shows the WCAG ratio against white and black so you can tell at a glance whether the colour is readable as text.

How to use

1. Select a color using the visual picker, or enter a value in any supported format (HEX, RGB, HSL).
2. View the color displayed in all CSS formats simultaneously, with one-click copy for each format.
3. Adjust opacity with the alpha slider to get RGBA and HSLA values, then copy the CSS code you need.

When to use

• Translating a designer's hex value into the format your CSS framework expects.
• Building a colour palette and needing HSL values to derive consistent lighter and darker shades.
• Adding transparency to an existing brand colour for overlays, shadows, or hover states.

Result

A frontend developer picks their brand's orange #F97316 and instantly gets rgb(249, 115, 22), hsl(25, 95%, 53%), and all other formats to use consistently across their stylesheet.

FAQ

Why is the named colour field sometimes empty?

CSS only ships with 147 named colours and your hex value has to match one exactly. Almost any brand colour will fall in between two named values, which is normal. The field is mostly useful for spot-checking common stock colours like tomato or steelblue.

When should I use HSL instead of HEX or RGB?

HSL is easier to tweak by hand: bumping the lightness by 10 gives you a lighter shade, bumping the hue by 30 walks around the colour wheel. Designers reach for HSL when building scales. RGB and HEX are slightly more compact in the final stylesheet.

Does the opacity slider produce a different colour or just transparency?

It only changes the alpha channel. The underlying red, green, blue values stay the same. That's why rgba(255, 0, 0, 0.5) over a white background looks pink — it's the same red, blended 50/50 with what's behind it.

Are these CSS values supported in every browser?

HEX, RGB, RGBA, HSL, HSLA, and named colours have universal support going back 15 years, all the way to IE11. OKLCH is also generated here and works everywhere current — Chrome, Firefox, Safari, and Edge from 2023 onward — so keep a hex or rgb() fallback if you still target very old engines.

How do I get the hex code for a colour I see on a website?

Click Pick from screen to open the eyedropper, then click any pixel anywhere on your display — a webpage, an image, a design mock — and that colour loads instantly. (The eyedropper needs Chrome, Edge, or Opera; on Safari or Firefox, grab the hex with your operating system's screen colour picker and paste it into the HEX field instead.) Either way you get every equivalent format and the opacity-adjusted variants at once.

Related Tools