Fast, practical, browser-based developer tools
Pick a color and instantly view its HEX, RGB, and HSL values for design and development work. This tool is useful for UI design, branding, CSS styling, theme building, visual testing, and selecting exact color values for websites and digital products.
Choosing the right color is a common task in web design, app interfaces, branding systems, prototypes, and front-end styling. This color picker helps you inspect one color in multiple formats at the same time, which makes it easier to move between design decisions and real CSS or code implementation.
This color picker is designed to work directly in the browser. That means your selected colors, typed HEX values, and generated color formats can be handled locally on your device during the normal workflow.
For more details about site usage and analytics, read our Privacy Policy.
Choose a color using the picker or type a valid HEX value manually. The tool updates the preview instantly and shows matching HEX, RGB, and HSL values that you can copy into your design or development workflow.
HEX: #6ea8fe RGB: rgb(110, 168, 254) HSL: hsl(216, 99%, 71%)
#3366ff, rgb(51 102 255), and hsl(225 100% 60%) are
three notations for one point in the sRGB colour space — the standard gamut of
a typical monitor. HEX is just RGB written in base 16: the pairs are red, green, blue from
00 to FF (0–255). Converting between HEX and RGB is lossless and
exact. HSL is a different arrangement of the same sRGB values into hue, saturation,
and lightness, which is friendlier for reasoning about a colour but describes nothing sRGB
cannot. None of the three can express the wider colours a modern P3 display can show — that is
what the newer oklch() and color(display-p3 …) functions are for.
This is the trap that makes HSL misleading for building palettes.
hsl(60 100% 50%) is a bright yellow and hsl(240 100% 50%) is a deep
blue — identical "lightness" of 50%, yet the yellow looks dramatically brighter than the blue
to the human eye. HSL's L is a mathematical midpoint of the RGB channels, not a measure of how
light a colour actually appears. So a set of swatches all at L: 50% will look
wildly uneven, and text that is readable on one 50% background can be illegible on another.
This is exactly what OKLCH was designed to fix. Its L axis is perceptual lightness, so two colours at the same OKLCH L genuinely look equally light regardless of hue. If you build tints and shades by fixing hue and chroma and stepping L in OKLCH, you get an even, predictable ramp; do the same in HSL and the steps bunch up and jump. For a single colour value HSL is fine — for generating a consistent scale, reach for OKLCH.
Whether text is readable is governed by contrast ratio, computed from the relative luminance of the text and background colours — and crucially it cannot be eyeballed from HSL lightness, because two colours with the same HSL L can have very different luminance. The ratio runs from 1:1 (identical) to 21:1 (black on white).
WCAG 2 sets the thresholds most audits check against:
Level AAA raises normal text to 7:1. A common oversight: a pale placeholder or a thin grey button outline that looks tasteful often fails the 3:1 UI-component rule, even when the body text passes.
#RRGGBBAA and the 50% surprise
Modern CSS accepts an alpha channel appended to a hex colour: eight digits
#RRGGBBAA, or the four-digit shorthand #RGBA. So
#3366ff80 is that blue at about 50% opacity. All current browsers support it, so
you rarely need rgba() just for transparency any more.
The catch is that the alpha byte is hexadecimal, not a percentage, and people write the wrong
value. 50% opacity is 80 (128 of 255), not 50; the round-looking
#…50 is actually about 31%. Handy anchors: FF = 100%,
BF ≈ 75%, 80 ≈ 50%, 40 ≈ 25%, 00 = fully
transparent. When in doubt, use rgb(51 102 255 / 50%), where the alpha really is a
percentage and there is nothing to convert.
No — they are three ways of writing the same point in sRGB. HEX is RGB in base 16 (lossless to convert); HSL rearranges the same values into hue, saturation, and lightness for easier adjustment. None of them reach colours outside sRGB.
HSL's lightness is a numeric average of RGB channels, not perceived brightness, so
hsl(60 100% 50%) yellow looks far lighter than hsl(240 100% 50%)
blue. Use OKLCH, whose L axis is perceptual, when you need swatches that look evenly light.
WCAG 2 AA requires 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.66px bold). UI components and meaningful graphics also need 3:1. AAA raises normal text to 7:1. Contrast comes from luminance, not from HSL lightness, so it must be measured.
#RRGGBBAA appends a hex opacity byte (#RGBA is the shorthand).
It is hexadecimal, not a percentage: 50% is 80, not 50. Use
FF=100%, 80≈50%, 00=transparent, or switch to
rgb(… / 50%) to write the alpha as a percentage.
For a one-off colour, HEX or HSL is fine. For generating tints, shades, and evenly-spaced palettes, OKLCH is better because its lightness and chroma are perceptually uniform, and it can also describe wide-gamut P3 colours that sRGB notations cannot.
No. Colour selection and format conversion run entirely in your browser; nothing about the colour you pick is sent anywhere.