Pick any color, copy its HEX, RGB and HSL in one click, check WCAG contrast with live AA/AAA badges, and generate a 10-shade palette. Free, private, no sign-up.
#f2c230rgb(242, 194, 48)hsl(46, 88%, 57%)Same hue, stepped lightness — a ready-made palette for backgrounds, buttons and text. Click any shade to copy its HEX. Great for mood boards and Pinterest palettes.
Large heading text
The quick brown fox jumps over the lazy dog — body copy at a normal reading size.
Every color on a screen is the same number wearing three different outfits. HEX (#f2c230) is the web's default: compact, paste-ready, and the format browser dev tools and Figma show first. RGB (rgb(242, 194, 48)) speaks in three channel values, which is what canvas, image libraries and server code usually expect — and it grows an alpha channel (rgba) when you need transparency. HSL (hsl(46, 88%, 57%)) is the human-friendly one: raise the L to get lighter, lower the S to go muted, nudge the H to slide to a neighboring hue. That is why HSL is the design-system favorite — an entire shade scale is just one number changing.
| Format | Looks like | Best for |
|---|---|---|
| HEX | #f2c230 | Plain CSS values, Figma/Sketch fields, config files, sharing with developers — the most portable format |
| RGB | rgb(242, 194, 48) | Canvas and image APIs, adding transparency with rgba(), code that expects separate channel values |
| HSL | hsl(46, 88%, 57%) | Building tints, shades and design tokens — tweak lightness or saturation without guessing new hex digits |
Contrast is measured as a ratio from 1:1 (no difference) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set the bar: 4.5:1 for normal text and 3:1 for large text and UI components to reach level AA; 7:1 and 4.5:1 for level AAA. In plain English: light grey text on a white background usually fails, while the same text darkened a few steps passes — the checker's badges above show this live. Why this matters in Europe: WCAG 2.1 AA is the benchmark inside the harmonised European standard EN 301 549, which public bodies across the EU must meet, and the European Accessibility Act is extending similar duties to many private online services. Aim for AA on every piece of readable text — it protects low-vision users, helps mobile readers in bright sunlight, and keeps you on the safe side of European accessibility rules.
If your site offers products or services to the public, quite possibly yes. The European Accessibility Act is transposing into national law across the EU, and public-sector bodies have been bound to WCAG 2.1 AA for years under the Web Accessibility Directive, based on the harmonised European standard EN 301 549. Even without a legal duty, AA contrast is the accepted definition of "readable text" in Europe — aim for at least 4.5:1 on body text.
HEX for plain color values (#f2c230), RGB/rgba when you need transparency, and HSL when you plan to tweak lightness programmatically. This page's Copy full CSS snippet button gives you all three in one ready-to-paste block, so you can use whichever your code needs.
Keep the hue (and roughly the saturation) fixed and step the lightness through about ten values — exactly what the shade strip generator above does. Pick your brand color, then click any of the ten generated shades to copy its HEX. Use the lightest shades for backgrounds, the darkest for text, and the middle ones for buttons and accents.
No. WCAG exempts logotypes and purely decorative text that nobody needs to read to use the page. Everything functional — body copy, form labels, buttons, navigation — should meet at least AA: 4.5:1 for normal text, 3:1 for large text and UI components.
No. The picker, converter, contrast math and shade generator are plain JavaScript running locally in your browser. Nothing you type or pick is uploaded, stored or logged — brand colors stay private.
Create strong, random passwords with a strength meter — free and private.
Generate →