Color converter and Delta E: every format, Display P3 and app code
Paste a color in any common notation and get it in every CSS format, as Display P3, and as ready-to-paste code for iOS, Android, Flutter and Unity. Then compare it with a second color: Delta E (CIEDE2000, CIE76 and OKLab) tells you whether a match would pass a print or brand check.
- HEX
#7B3F8C - RGB
rgb(123, 63, 140) - HSL
hsl(287, 38%, 40%) - HSV
287°, 55%, 55% - CMYK
12%, 55%, 0%, 45% - Lab
lab(37% 36.1 -32.2) - OKLCH
oklch(47.5% 0.135 318.4) - Decimal
8077196 - CSS hex with alpha
#7B3F8CFF - CSS rgb() percentages
rgb(48.2% 24.7% 54.9%) - CSS Display P3
color(display-p3 0.4513 0.2592 0.5329) - CSS color(srgb)
color(srgb 0.482 0.247 0.549) - SwiftUI
Color(red: 0.482, green: 0.247, blue: 0.549) - UIKit (Swift)
UIColor(red: 0.482, green: 0.247, blue: 0.549, alpha: 1.0) - Android XML
<color name="brand">#FF7B3F8C</color> - Jetpack Compose
Color(0xFF7B3F8C) - Flutter
Color(0xFF7B3F8C) - Unity (C#)
new Color(0.482f, 0.247f, 0.549f, 1f) - Normalized RGB (0-1)
0.482, 0.247, 0.549 - Integer (ARGB)
4286267276
Compare two colors (Delta E)
How different two colors look, the way print shops and brand teams check a match: under 1 is invisible, under 2 needs a close look.
- CIEDE2000
- 4.36
- CIE76
- 5.09
- OKLab ×100
- 4.31
Clearly noticeable at a glance. Between them, text contrast is 1.20:1.
On this page
A brand color travels. It starts as a hex code in a style guide, then turns up as an rgb() value in a stylesheet, a Color() in a SwiftUI view, an ARGB integer in an Android resource and a swatch on a printer's proof. Each place wants it written differently, and each rewrite is a chance for a typo. This converter writes them all from one input, and its second half checks whether two colors that should match really do.
What you can paste in
The input reads hex (three or six digits, with or without #), rgb() with commas or spaces, hsl(), a bare "123, 63, 140" triple, and any of the 148 CSS color names or the xkcd survey names. You can also drop a swatch from anywhere on the site onto either box.
What comes out
Every CSS notation: hex, rgb(), hsl(), HSV, CMYK, Lab, OKLCH, color(srgb …) and the decimal value. Display P3 is the wide-gamut space of recent Apple screens and many phones; the converter writes your color in color(display-p3 …) so a stylesheet can use the wider space while describing the same color. Then come platform codes: SwiftUI and UIKit for iOS, an Android XML resource, Jetpack Compose, Flutter, Unity and a normalized 0-1 triple for shaders and 3D tools.
Delta E, briefly
Delta E is a single number for how different two colors look. The converter shows three versions. CIEDE2000 is the modern standard used for print and brand approval; it corrects the older formula where the eye is most and least sensitive. CIE76 is the plain distance in Lab, still quoted on older spec sheets. OKLab ×100 is the distance in the space ColorPlum's other tools use. As a rough guide to CIEDE2000: under 1 nobody can see a difference, 1 to 2 shows only side by side on close inspection, 2 to 3.5 is a small difference many brand checks accept, and above 5 the colors look clearly different.
Worked example
A print shop sends back a proof of a plum logo and you scan the swatch as #8A4A99 against the brand's #7B3F8C. CIEDE2000 comes out at 4.36 (CIE76 5.09, OKLab 4.31), which the converter reads as clearly noticeable at a glance, so the proof should go back. A second proof scans as #7D408E: CIEDE2000 0.52, below what the eye can detect, so that one passes. The same brand color for the app team is Color(0xFF7B3F8C) in Jetpack Compose and Flutter, and color(display-p3 0.4513 0.2592 0.5329) in a wide-gamut stylesheet.
Limits worth knowing
Every value here is computed from sRGB, the color space of hex codes. A scanner or camera reading of a printed swatch is itself an approximation, so treat Delta E from a scan as a guide and check the physical proof under good light. CMYK values are a simple device-independent conversion, not a profile for a particular press.
Sources
- W3C, CSS Color Module Level 4: predefined color spaces, Display P3 and conversion code (checked 2026-11-10) w3.org
- Sharma, Wu and Dalal, The CIEDE2000 color-difference formula: implementation notes (Color Research and Application, 2005) doi.org
- W3C, CSS Color Module Level 4: converting sRGB to Lab (checked 2026-11-10) w3.org