A color converter for every format you use
The Color Converter turns any colour into every format you are likely to need. Paste #FF6347, rgb(255 99 71), hsl(9 100% 64%), oklch(0.7 0.2 32) or simply “tomato”, and you instantly get HEX, HEX with alpha, RGB, RGBA, HSL, HSV/HSB, HWB, CMYK, CIE Lab and LCH, OKLab, OKLCH, the decimal value and the Android ARGB integer.
Every box is editable. Change the HSL lightness, paste a CMYK value from a print brief or type an Android colour int, and all the other formats follow. Ready-made snippets for Swift, SwiftUI, Flutter, Jetpack Compose and Android save typing. The maths follows CSS Color Level 4, and nothing leaves your device.
How to use the Color Converter
- Paste or type a colour into “Paste any colour”, or click the square beside it to use your system colour picker.
- Read the result in each format box. HEX8, RGBA and the CSS functions also carry the alpha (opacity) value.
- To convert from a particular format, type straight into its box — for example
0 100 100in HSV / HSB,0, 61, 72, 0in CMYK or-40121in Android ARGB int. Every other box updates as you type. - Press the copy button beside any value or code snippet.
- If a note says the colour is outside sRGB, the values are the closest displayable colour.
Color Converter features
Fourteen formats at once
All fourteen formats update together from a single input, each with its own copy button.
Two-way editing
Each format box is an input. Type bare numbers such as 120 100 25 into the HSL box and the tool adds the function name for you.
Modern CSS colour spaces
Lab and LCH use the D50 white point exactly like CSS lab() and lch(); OKLab and OKLCH use Ottosson’s published matrices.
Browser-grade gamut mapping
Colours beyond sRGB are brought into range with the CSS Color 4 algorithm, which reduces chroma while keeping lightness and hue.
App code snippets
Copy-ready UIColor, SwiftUI Color, Flutter / Compose Color(0xAARRGGBB), Android XML and Color.parseColor lines.
Transparency kept
Alpha survives every conversion, including #RRGGBBAA, rgba(), “/ alpha” and 0xAARRGGBB. Editing a format without alpha, such as CMYK, keeps the current opacity.
How the conversions work
HEX ↔ RGB is plain base-16 arithmetic: each pair of hex digits is one channel from 0 to 255, so FF = 15 × 16 + 15 = 255 and 63 = 6 × 16 + 3 = 99.
RGB → HSL divides each channel by 255, then takes the largest (max) and smallest (min) value. Lightness L = (max + min) ÷ 2, saturation S = (max − min) ÷ (1 − |2L − 1|), and the hue angle depends on which channel is largest. For #FF6347: max = 1, min = 0.278, so L = 63.9%, S = 100% and H = 60 × (0.388 − 0.278) ÷ 0.722 = 9.1°.
RGB → CMYK uses K = 1 − max, then C = (1 − R − K) ÷ (1 − K), and the same for M and Y. Lab undoes the sRGB gamma curve, converts to CIE XYZ, adapts from the D65 to the D50 white point (Bradford transform) and applies the CIE Lab formula. OKLab maps linear RGB to cone responses, takes cube roots and mixes them into lightness and two colour axes. LCH and OKLCH are the polar (chroma + hue angle) forms.
Which colour format should you use?
| Format | Where you meet it | Good to know |
|---|---|---|
| HEX / HEX8 | CSS, Figma, brand guides | In CSS the alpha pair comes last: #RRGGBBAA |
| RGB / RGBA | CSS, canvas, image editors | 0–255 per channel; alpha 0–1 |
| HSL | CSS | Lightness 50% is the most vivid version of a hue |
| HSV / HSB | Photoshop, Figma and app pickers | Not valid CSS |
| HWB | CSS Color 4 | Hue plus amounts of white and black |
| CMYK | Print briefs | This naive formula is only a starting point |
| Lab / LCH | Photoshop, colour science, CSS | D50 white point, L from 0 to 100 |
| OKLab / OKLCH | Modern CSS, palette tools | Perceptually even lightness |
| Android ARGB int | Android @ColorInt | Alpha first, signed 32-bit |
| Decimal | Spreadsheets, game engines, Discord embeds | 0xRRGGBB written in base 10 |
Android, iOS and Flutter colour values
Android packs a colour into one 32-bit integer in ARGB order — alpha first. Because Java and Kotlin ints are signed, every fully opaque colour becomes a negative number: #FF6347 at full opacity is 0xFFFF6347, which is −40,121. Flutter’s Color(0xFFFF6347) and Jetpack Compose’s Color(0xFFFF6347) use the same alpha-first order, which is the opposite of CSS 8-digit HEX, where alpha comes last. Mixing the orders up is a classic bug.
UIKit and SwiftUI expect channels as fractions from 0 to 1, hence 99/255 in the snippets. For other hex/decimal/binary maths use the Number Base Converter; to choose a colour visually, use the Color Picker, and to name one, the Color Name Finder.
Color Converter FAQ
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each pair from base 16 to base 10. For #FF6347: FF = 255, 63 = 99 and 47 = 71, so the colour is rgb(255, 99, 71). Paste the HEX code into this color converter and it does it instantly.
How do I convert RGB to HEX?
Write each 0–255 value as two hexadecimal digits and join them: 255 → FF, 99 → 63, 71 → 47 gives #FF6347. Values below 16 need a leading zero, so 9 becomes 09.
Why are the CMYK values only approximate?
Screens mix light while printers mix ink, and print results depend on ink, paper and press. This tool uses the standard device-independent formula; professional software converts through an ICC profile, which gives different numbers. Ask your printer which profile to use.
What is the difference between Lab and OKLab?
CIE Lab (1976) is the classic perceptual space used in Photoshop and colour measurement; CSS uses it with a D50 white point. OKLab, published by Björn Ottosson in 2020, predicts perceived lightness and hue more evenly, especially for blues, so OKLCH is usually better for building palettes.
Why is my Android colour int negative?
Android stores colours as signed 32-bit integers with alpha in the top byte. Any alpha of 128 or more sets the sign bit, so opaque colours are negative. −40121 and 0xFFFF6347 are the same value.
What does “outside the sRGB gamut” mean?
lab(), lch(), oklab() and oklch() can describe colours more saturated than a standard sRGB screen can show. The converter maps them back with the CSS Color 4 algorithm browsers use, so HEX and RGB show the closest displayable colour.