What is the Color Converter?
Designers and developers describe colours in many ways: HEX codes in CSS, RGB in design tools, HSL for adjusting lightness, CMYK for print, OKLCH in modern CSS, and ARGB integers in Android and Flutter. This converter reads almost any of them, from “tomato” to #18488B to oklch(45% 0.13 260), and shows the same colour in every other format, ready to copy.
It also checks the WCAG contrast ratio against white, black or any colour you choose, so text stays readable, and builds a scale of lighter tints and darker shades plus matching colour harmonies, mixed in the perceptual OKLab space so the steps look even.
How to use it
- Type or paste a colour in any format, or pick one with the colour picker.
- Copy the format you need: HEX, RGB, HSL, OKLCH, CMYK, or code for Android, Flutter, SwiftUI or UIKit.
- Check the contrast with white, black or your own background colour.
- Click a tint, shade or harmony to explore related colours.
Example
#18488B
rgb(24, 72, 139) hsl(215, 70.6%, 32%) oklch(41.5% 0.1236 258.6) Flutter: Color(0xFF18488B)
Features
- Reads any format. HEX (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), cmyk(), 148 CSS names and 0xAARRGGBB.
- App-ready code. Android ARGB and Kotlin Color(), Flutter Color(0xFF…), SwiftUI and UIColor.
- WCAG contrast. Contrast ratio with AA and AAA pass or fail for normal and large text.
- Tints and shades. An 11-step scale from near white to near black, perfect for design tokens.
- Harmonies. Complementary, analogous, triadic and split-complementary colours.
- Nearest name. The closest CSS colour name for any colour.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and turn each from hexadecimal into a number from 0 to 255: #18488B is 18 → 24, 48 → 72 and 8B → 139, so rgb(24, 72, 139). This tool does it instantly for every format.
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). AAA needs 7:1 and 4.5:1. Check your text colour against its background.
What is OKLCH?
A modern colour space supported in CSS where lightness, chroma (colourfulness) and hue match how people see colour. Changing only the lightness gives evenly spaced, consistent shades, which makes it great for design systems.
How do I use a HEX colour in Flutter or Android?
Add the alpha in front: #18488B becomes 0xFF18488B, so Color(0xFF18488B) in Flutter or Kotlin, or #FF18488B in Android XML. FF means fully opaque.
Why does a colour look different in print?
Screens mix light (RGB) while printers mix ink (CMYK), and bright screen colours often cannot be printed exactly. The CMYK values here are a simple conversion; for accurate print colours, use your printer’s colour profile.
Last updated · Free, no sign-up, runs in your browser.