RGB Color Picker

Hex code —

CSS rgb(): —
HSL: —
HSV / HSB: —
CMYK (naive): —
Relative luminance: —
Contrast with white: —
Contrast with black: —
Better text colour: —

Move the red, green and blue sliders, each from 0 to 255, and the picker returns the matching hex code and the same colour as HSL, HSV and CMYK. For example, 255, 127, 80 gives #FF7F50, the CSS keyword coral, at hsl(16, 100%, 66%). It also reports contrast against white and black text.

About this tool

Designers and front-end developers often start from three channel numbers: a brand guide lists RGB values, a screenshot tool reports them, or a design file exports them. This picker turns those numbers into the formats a stylesheet or print brief expects. Set each channel and read the six-digit hex code, the CSS rgb() string, HSL and HSV with hue in degrees, and a naive CMYK split. It also computes WCAG relative luminance and the contrast ratio with white and with black, so you can see at once which text colour stays readable on the swatch. One limit: the CMYK figures are a straight arithmetic conversion with no ICC printer profile, so a print shop's proof can differ noticeably.

How to use it

Set the red channel
Drag the Red slider or type an exact whole number from 0 to 255 in the box beside it.
Set green and blue
Adjust the Green and Blue sliders the same way; the results change as you move them.
Copy the format you need
Take the hex code for CSS or design apps, or the HSL, HSV or CMYK line for other software.
Check text contrast
Compare the two contrast ratios with 4.5:1, the WCAG AA minimum for normal body text.

Examples

CSS named colour orange

Red: 255
Green: 165
Blue: 0

Result Hex code: #FFA500
CSS rgb(): rgb(255, 165, 0)
HSL: hsl(39, 100%, 50%)
HSV / HSB: hsv(39, 100%, 100%)
CMYK (naive): cmyk(0%, 35%, 100%, 0%)
Relative luminance: 0.4817
Contrast with white: 1.97
Contrast with black: 10.63
Better text colour: Black

Hex: 255 → FF, 165 → A5, 0 → 00, giving #FFA500.
Max = 1, min = 0 (channels ÷ 255); hue = 39°, lightness = 50%.
Relative luminance = 0.2126·R + 0.7152·G + 0.0722·B on linearised channels = 0.4817.
Contrast with white = 1.05 ÷ (0.4817 + 0.05) = 1.97:1; with black = 10.63:1.

255, 165, 0 is the CSS keyword orange; black text reads better on it than white.

Coral, 255 127 80

Red: 255
Green: 127
Blue: 80

Result Hex code: #FF7F50
CSS rgb(): rgb(255, 127, 80)
HSL: hsl(16, 100%, 66%)
HSV / HSB: hsv(16, 69%, 100%)
CMYK (naive): cmyk(0%, 50%, 69%, 0%)
Relative luminance: 0.3702
Contrast with white: 2.5
Contrast with black: 8.4
Better text colour: Black

Hex: 255 → FF, 127 → 7F, 80 → 50, giving #FF7F50.
Max = 1, min = 0.3137 (channels ÷ 255); hue = 16°, lightness = 66%.
Relative luminance = 0.2126·R + 0.7152·G + 0.0722·B on linearised channels = 0.3702.
Contrast with white = 1.05 ÷ (0.3702 + 0.05) = 2.5:1; with black = 8.4:1.

The hex pairs are FF, 7F and 50, and the hue lands at 16 degrees on the colour wheel.

Pure white

Red: 255
Green: 255
Blue: 255

Result Hex code: #FFFFFF
CSS rgb(): rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
HSV / HSB: hsv(0, 0%, 100%)
CMYK (naive): cmyk(0%, 0%, 0%, 0%)
Relative luminance: 1
Contrast with white: 1
Contrast with black: 21
Better text colour: Black

Hex: 255 → FF, 255 → FF, 255 → FF, giving #FFFFFF.
Max = 1, min = 1 (channels ÷ 255); hue = 0°, lightness = 100%.
Relative luminance = 0.2126·R + 0.7152·G + 0.0722·B on linearised channels = 1.
Contrast with white = 1.05 ÷ (1 + 0.05) = 1:1; with black = 21:1.

White has relative luminance 1, so against black it reaches the WCAG maximum of 21:1.

How it is calculated

hex = R, G, B each as two hex digits; L = 0.2126·R′ + 0.7152·G′ + 0.0722·B′; contrast = (L1 + 0.05) ÷ (L2 + 0.05)

R, G, B: channel values from 0 to 255 in the sRGB colour space
R′, G′, B′: channels divided by 255 and linearised with the sRGB transfer curve
L: WCAG relative luminance, 0 for black and 1 for white
L1, L2: luminance of the lighter and darker colour in the pair

Each channel is written in base 16, so 255 becomes FF and 80 becomes 50. HSL and HSV come from the largest and smallest of the three scaled channels: the hue depends on which channel is largest, and saturation on the gap between them. CMYK takes K as one minus the largest channel and scales the rest. Luminance follows the WCAG 2.x definition, and contrast with white uses L1 = 1, with black L2 = 0.

When not to use it

For press-ready CMYK, use a colour-managed conversion with your printer's ICC profile instead of these naive percentages.
For wide-gamut colours in Display P3 or Rec. 2020, an sRGB picker clips values it cannot represent.

Common mistakes

Entering 0 to 1 fractions or percentages where the picker expects whole channel values from 0 to 255.
Reading HSV brightness as HSL lightness; pure red is 100% value in HSV but 50% lightness in HSL.
Judging text readability by eye instead of checking the contrast ratio against 4.5:1.

Frequently asked questions

How is an RGB value turned into a hex code?

Each channel from 0 to 255 is written as two base-16 digits, then the three pairs are joined after a hash sign. Red 255 is FF, green 127 is 7F and blue 80 is 50, so the result is #FF7F50.

What is the difference between HSL and HSV?

Both use the same hue angle. HSL puts pure colours at 50% lightness, with 100% always white. HSV, also called HSB, puts pure colours at 100% value, and 0% value is always black. Photoshop's colour picker uses HSB; CSS uses HSL.

Why might the CMYK numbers differ from my print software?

This picker uses the plain arithmetic conversion with K equal to one minus the brightest channel. Print software applies an ICC profile for a specific press and paper, which adds ink limits and gray component replacement, so its percentages differ.

What contrast ratio does text need?

WCAG 2.x level AA asks for at least 4.5:1 for normal text and 3:1 for large text, meaning 18 point or 14 point bold. Level AAA raises those to 7:1 and 4.5:1. The picker reports the ratio with both white and black text.

How many colours can RGB describe?

With 256 levels per channel, 8-bit RGB covers 256 × 256 × 256 = 16,777,216 combinations, all inside the sRGB gamut used by most screens and by default in CSS.

Why is green weighted most in luminance?

Human eyes are most sensitive to green light, so the sRGB luminance formula gives green 0.7152 of the weight, red 0.2126 and blue only 0.0722. That is why pure blue looks darker than pure green at the same channel value.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 12). RGB Color Picker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-converters-and-codes/rgb-color-picker/

MLA

Tools Directory Editorial Team. “RGB Color Picker.” Tools Directory, 12 Oct. 2026, https://tools.milunir.com/design/color-converters-and-codes/rgb-color-picker/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “RGB Color Picker.” Tools Directory. Last modified October 12, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-converters-and-codes/rgb-color-picker/.

Link

<a href="https://tools.milunir.com/design/color-converters-and-codes/rgb-color-picker/">RGB Color Picker – Tools Directory</a>