ARGB Color Picker and 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 takes a colour from your browser's native picker or from any common notation you paste, lets you set its opacity, and writes it out for Android XML (#AARRGGBB), Flutter and Jetpack Compose (Color(0xAARRGGBB)), CSS (#RRGGBBAA, rgba() and hsl()) and as plain six-digit hex. Everything 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. Two-digit values such as #F8 are not a shorthand 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 browser's colour dialog always returns an opaque six-digit value, so the opacity on this page comes from the slider or from an alpha value you paste in.

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 the HSL form of the picked colour next to the other notations.

Android, Flutter and Compose: alpha comes first

Android colour resources accept #RGB, #ARGB, #RRGGBB and #AARRGGBB. The alpha pair leads, the reverse of CSS. Flutter's Color and Jetpack Compose's Color take the same order as one 32-bit number, written 0xAARRGGBB. Leave the alpha out of a Flutter value and you get 0x00RRGGBB, which is fully transparent, so always write the FF for an opaque colour.

<!-- Android: res/values/colors.xml -->
<color name="brand">#FFFF8800</color>
<color name="brand_50">#80FF8800</color>
// Flutter
const brand50 = Color(0x80FF8800);
// Jetpack Compose
val Brand50 = Color(0x80FF8800)
/* CSS: the same colour, alpha last */
color: #FF880080;

The four-digit forms have the same trap: Android reads #8F80 as alpha 88 then FF8800, while CSS reads #F808 for that colour. When you paste an eight-digit or four-digit value above, choose which order it is written in. Values that start with 0x or Color( are always read alpha first.

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 and Compose follow 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 paste a colour into the box: #FF8800, #F80, #80FF8800, Color(0x80FF8800), rgb(255, 136, 0) or rgba(255, 136, 0, 0.5).
3. For an eight-digit or four-digit hex value, choose whether it is written alpha first (Android, Flutter) or alpha last (CSS).
4. Move the opacity slider to set transparency. Every output and the opacity table update at once.
5. Use the copy button next to the notation you need: Android XML, Flutter and Compose, CSS hex with alpha, HEX, RGBA or HSL.

• 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, Flutter or Compose, where alpha comes first.
• Finding the hex alpha pair for an opacity, such as 80 for 50% or CC for 80%.
• Picking a flat colour for a chart series or button without opening a design tool.