Color Picker & Converter

Web colours are written most often as a hexadecimal triplet (#FF8800) or as an RGB function (rgb(255, 136, 0)). Both describe the same three channels of the sRGB colour space, red, green and blue, each from 0 to 255. Hex is what designers paste from Figma and what most stylesheets contain; RGB makes the channel values explicit, which is what Canvas, SVG scripting and colour maths need.

This page opens your browser's native colour picker, shows the chosen colour as a six-digit HEX value you can edit and as an RGB triple you can copy. The conversion is a base-16 to base-10 change per channel and runs in your browser.

Anatomy of a hex colour

#RRGGBB is three pairs of hex digits, each pair running from 00 (0) to FF (255). #FF8800 is red 255, green 136, blue 0: a saturated orange. Letters are case-insensitive, so #ff8800 and #FF8800 are the same colour. The three-digit shorthand #F80 expands by doubling each digit to #FF8800; note that #F8 or #FF88 are not shorthands at all. CSS Color Level 4 added #RRGGBBAA and #RGBA, where the last pair is alpha, so #FF880080 is the same orange at 50% opacity. The picker on this page always returns an opaque six-digit value in lowercase, which the HEX field displays in uppercase.

Converting by hand and in code

Split the hex string after the # into pairs and parse each pair as a base-16 integer. Going the other way, convert each channel to hex and pad to two digits (0 becomes 00, not 0).

// JavaScript
const [r, g, b] = ['FF', '88', '00'].map(h => parseInt(h, 16));   // 255, 136, 0
const hex = '#' + [255, 136, 0].map(c => c.toString(16).padStart(2, '0')).join('');
# Python
r, g, b = (int('ff8800'[i:i+2], 16) for i in (0, 2, 4))
/* CSS: the same colour four ways */
color: #ff8800;
color: rgb(255 136 0);            /* modern space-separated syntax */
color: rgb(255 136 0 / 50%);      /* with alpha */
color: rgb(from var(--brand) r g b / 50%);  /* relative colour syntax */

HSL: the model people reason in

RGB is how screens work, not how designers think. HSL expresses a colour as hue (0 to 360 degrees around the colour wheel), saturation (0% grey to 100% vivid) and lightness (0% black to 100% white). #FF8800 is hsl(32, 100%, 50%). A hover state that is "the same colour, a little darker" is hsl(32 100% 42%), which is much easier to derive than a new hex value. To convert from RGB, scale each channel to 0 to 1, take the maximum and minimum channel values, then lightness is (max + min) / 2, saturation is (max - min) / (1 - |2L - 1|), and hue depends on which channel is largest: 60 times (G - B) / (max - min) when red leads, plus 120 degrees when green leads or 240 when blue leads. This page shows HEX and RGB only; browser DevTools can cycle a colour through HSL by shift-clicking the swatch in the Styles panel.

Contrast and accessibility

WCAG defines contrast from relative luminance. Each channel is scaled to 0 to 1 and linearised (divided by 12.92 when at or below 0.04045, otherwise ((c + 0.055) / 1.055) ^ 2.4), then luminance is 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio between two colours is (L1 + 0.05) / (L2 + 0.05) with the lighter colour on top. The thresholds that matter:

Worked example: #FF8800 on white is about 2.4 : 1, which fails for text of any size, while the same orange on black is about 8.8 : 1 and passes AAA. Mid greys are the classic trap: #777777 on white is 4.48 : 1 and fails AA by a hair, whereas #767676 is 4.54 : 1 and passes.

Where hex and rgb fit in a design system

• CSS custom properties. Store the brand colour once, --brand: #ff8800;, and derive variants with color-mix(in srgb, var(--brand) 80%, black) or the relative colour syntax shown above instead of hard-coding a second hex.
• Canvas and SVG. ctx.fillStyle and SVG fill accept either notation; scripts that animate a colour usually keep the RGB numbers and format them as needed.
• Android. Android XML uses #AARRGGBB with alpha first, so a CSS #FF880080 (orange at 50%) pasted into Android becomes a fully opaque colour with a different hue. Flutter follows the same ARGB order: Color(0xFFFF8800).
• iOS. UIColor and SwiftUI take channels as floats from 0 to 1, so 136 becomes 136 / 255, about 0.533.
• Tailwind. Arbitrary values accept hex directly: bg-[#ff8800].

Colour values are not personal data, but the page still runs entirely in your browser. For embedding small graphics next to your colours, see the image to Base64 tool.

1. Click the round swatch to open your browser or operating system colour picker and choose a colour visually.
2. Or type a full six-digit value with the leading #, such as #FF8800, into the HEX field. The RGB field updates once all six digits are present.
3. Use the copy button next to HEX or RGB to put that notation on the clipboard.
4. For transparency, take the RGB values and write rgb(r g b / 50%) in CSS, or append an alpha pair to the hex value.

• Converting a hex colour from a design file into RGB numbers for a Canvas, SVG or WebGL fill.
• Reading the exact channel values of a brand colour before deriving a darker hover state.
• Checking whether two hex values that look alike are actually identical.
• Reordering a CSS colour for Android or Flutter, where alpha comes first.
• Picking a flat colour for a chart series or button without opening a design tool.