Developer Tools

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL, and HSV formats with a visual picker and WCAG accessibility checker. Built for designers and developers who need exact values fast.

By InventiveHQ Team

The three color formats web developers reach for most — HEX (#FF5733), RGB (rgb(255, 87, 51)), and HSL (hsl(11, 100%, 60%)) all describe the identical on-screen color; they just encode it differently. HEX is a compact hexadecimal shorthand for the RGB channels and is the default in CSS and design tools. RGB lists the Red, Green, and Blue light channels from 0-255, matching how a display physically emits light. HSL restates the same color as Hue, Saturation, and Lightness, which makes it the easiest format to adjust by hand. Converting between them is lossless arithmetic — no color information is gained or lost.

That is the definition an AI Overview can hand you. What it can't do is let you pick a color, drag its saturation, and watch every format update at once — or tell you whether the pair you just chose passes a WCAG contrast check. Those are the parts that actually ship a design, so start with the live picker below and use the reference material underneath it.

Open the Color Picker toolFree, in your browser on inventivehq.com →
Loading interactive tool...

The same color, four ways

Every format below encodes exactly the same orange. The differences are about ergonomics, not the pixels you see.

One color expressed as HEX, RGB, HSL, and HSV A single orange swatch shown alongside its equivalent values in four color formats. #FF5733 HEX #FF5733 RGB rgb(255, 87, 51) HSL hsl(11, 100%, 60%) HSV hsv(11, 80%, 100%)

Which format should I use?

FormatLooks likeRangeAlpha channelBest when
HEX#FF57336 hex digits (or 3-digit shorthand)8-digit #FF573380Storing static brand values, design tokens, copy-pasting between design tools and CSS
RGB / RGBArgb(255, 87, 51)0-255 per channelrgba(…, 0.5)JavaScript color math, canvas/pixel work, reading channel values directly
HSL / HSLAhsl(11, 100%, 60%)H 0-360, S/L 0-100%hsla(…, 0.5)Building tint/shade ramps, hover states, and harmonious palettes by hand
HSV / HSBhsv(11, 80%, 100%)H 0-360, S/V 0-100%none in CSSArtistic color mixing in editors like Photoshop and GIMP
CMYKcmyk(0, 66, 80, 0)0-100% per channelnonePrint work — subtractive ink, not screen light
Which should I use?———HEX for values you store, HSL for values you calculate, CMYK only for print.

The practical takeaway: pick HEX when a color never changes, and HSL the moment you need to derive one color from another. Everything else is a conversion detail the picker above handles for you.

Converting HEX to RGB by hand

HEX is just base-16 RGB. Split the six digits into three pairs and convert each pair to base-10:

  • FF → (15 × 16) + 15 = 255
  • 57 → (5 × 16) + 7 = 87
  • 33 → (3 × 16) + 3 = 51

That gives rgb(255, 87, 51). A three-digit shorthand like #F53 expands by doubling each digit — #FF5533 — before you convert. Going the other direction, divide each channel by 16 to get the two hex digits. It is mechanical, which is exactly why a tool is faster than doing it in your head.

Advertisement

Accessibility: contrast is not optional

Picking a color that looks good is half the job; making sure people can read the text on it is the other half. WCAG expresses this as a contrast ratio between text and its background, running from 1:1 (invisible) to 21:1 (black on white). The thresholds that matter:

WCAG contrast ratio thresholds A scale showing the minimum contrast ratios required for WCAG AA and AAA compliance. Minimum contrast ratio required Fails Below 3:1 — avoid for any text AA large: 3:1 18pt, or 14pt bold AA normal: 4.5:1 the everyday minimum AAA normal: 7:1 gold standard

Note that contrast is about lightness difference, not hue — which is another reason HSL is handy. Two colors with the same hue but a wide gap in the L channel will usually pass, while two vivid but similarly-light colors can fail even though they look very different to a sighted user. The picker's built-in checker computes the exact ratio so you are not guessing.

Common use cases

  • Design system tokens — define brand colors once and export them to HEX, RGB, and HSL so web, mobile, and print stay in sync.
  • Hover and focus states — take a base HSL color and nudge the L value up or down for a consistent interaction ramp instead of hand-picking each shade.
  • Palette generation — rotate the H channel by 30° for analogous colors or 180° for a complement, straight from color-theory principles.
  • Accessibility audits — paste a text/background pair and confirm it clears the 4.5:1 bar before it ships.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

All three describe the same on-screen color with different numbers. HEX is a compact hexadecimal shorthand for RGB and is the CSS default. RGB lists Red, Green, and Blue from 0-255, matching how a screen emits light. HSL restates that color as Hue, Saturation, and Lightness, which is the easiest to adjust by hand.

When should I use HSL instead of RGB or HEX?

Use HSL whenever you need to change a color rather than just name it. Separate lightness and saturation axes let you darken a hover state, build a tint ramp, or rotate a hue for a palette without recomputing every channel.

How do I ensure good contrast?

Follow WCAG: normal text needs at least 4.5:1 (AA) and large text at least 3:1. For AAA, aim for 7:1 and 4.5:1 respectively. Use the accessibility checker in the tool above to measure any text/background pair exactly.

Need help with design systems?

Our design and development team can help implement consistent, accessible color systems and design tokens across your applications. Contact our design team.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

All three describe the same on-screen color, just with different numbers. HEX (#FF5733) is a compact hexadecimal shorthand for RGB and is the default in CSS and design tools. RGB (rgb(255, 87, 51)) lists Red, Green, and Blue channels from 0-255, matching how a display physically emits light. HSL (hsl(11, 100%, 60%)) restates that same color as Hue, Saturation, and Lightness, which is far easier to adjust by hand. Convert between all of them with the picker above.

When should I use HSL instead of RGB or HEX?

Use HSL whenever you need to change a color rather than just name it. Because lightness and saturation are separate axes, you can darken a button on hover by lowering the L value, build a tint/shade ramp by stepping L, or generate an analogous palette by rotating H — all without touching the other channels. HEX and RGB force you to recompute every channel to make the same adjustment.

How do I convert HEX to RGB manually?

Split the six-digit HEX into three pairs and convert each pair from base-16 to base-10. For #FF5733, FF = 255, 57 = 87, and 33 = 51, giving rgb(255, 87, 51). A three-digit shorthand like #F53 expands by doubling each digit (#FF5533) before you convert. The tool above does this instantly and also handles the reverse.

What contrast ratio do I need to pass WCAG?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. Non-text UI elements and graphical objects need 3:1. Ratios run from 1:1 (identical) to 21:1 (pure black on pure white).

What is the difference between RGB and RGBA?

RGBA adds a fourth value, the alpha channel, which controls opacity from 0 (fully transparent) to 1 (fully opaque). rgba(255, 87, 51, 0.5) is the same orange at 50% opacity. HEX has an 8-digit equivalent (#FF573380) where the last pair encodes alpha. Alpha affects only transparency, not the underlying hue.

Is HEX or RGB faster for browsers to render?

There is no meaningful rendering difference. The browser parses every color format into the same internal representation before painting, so #FF5733 and rgb(255, 87, 51) produce identical performance. Choose the format that is easiest for your team to read and maintain — typically HEX for static values and HSL for anything you compute.

What does the HSV/HSB format add over HSL?

HSV (Hue, Saturation, Value), also called HSB, is common in image editors like Photoshop. It replaces HSL's Lightness with Value, where 100% Value is the pure, brightest form of the hue rather than white. HSL is generally more intuitive for web work because 50% Lightness gives the most saturated color and 100% always gives white; HSV is preferred for artistic color mixing.

Can I use named colors instead of HEX codes?

Yes. CSS supports 147 named colors such as tomato, rebeccapurple, and steelblue, and they render identically to their HEX equivalents. Named colors are readable but limited and inconsistent, so most design systems convert them to HEX or HSL tokens. Use the reference in the tool above to find the exact value behind any name.

Related articles

From the Inventive HQ family
OmniCanvas Notes
Visual thinking on an infinite canvas.

Notes, sketches and ideas laid out spatially instead of in a list. For people who think in diagrams and keep outgrowing linear note apps.

Take a look