Skip to main content
floow.designfloow.design

Hex to RGB Converter

Convert between HEX, RGB, HSL, HSB, OKLCH and CMYK, and generate a full 50–950 ramp with native code.

Convert freeFree to export the ramp to 6 platformsNo sign-upNo watermarkRuns in your browser
#6366F1
On white
4.47:1
On black
4.70:1
Best text
Black
Tint & shade ramp
:root {
  --color-brand-50: #f3f3fc;
  --color-brand-100: #e5e6f8;
  --color-brand-200: #c8c9f3;
  --color-brand-300: #a9aaf0;
  --color-brand-400: #8789ef;
  --color-brand-500: #6366f1;
  --color-brand-600: #272bec;
  --color-brand-700: #1114c1;
  --color-brand-800: #0b0e85;
  --color-brand-900: #060749;
  --color-brand-950: #03042a;
}

Enter a colour in any format and get it back in all of them at once — HEX, RGB, RGBA, HSL, plus the literals SwiftUI and Android XML want.

Saves the small daily tax of hand-converting a designer's HEX into the form your platform actually compiles.

What HEX and RGB actually encode

Both describe the same thing: how much red, green and blue light to mix. HEX is just those three numbers written in base 16, two digits each, which is why #FF0000 and rgb(255, 0, 0) are identical. Neither format tells you anything useful about how the colour relates to its neighbours — that is what HSL is for.

Why HSL is worth learning

HSL separates hue, saturation and lightness, which means you can build a whole tonal ramp by moving one number. That is exactly what a mobile theme needs — a set of surfaces at consistent lightness steps rather than a pile of unrelated hex codes. It also makes dark mode a systematic transformation instead of a second round of guessing.

Alpha behaves differently across platforms

CSS takes alpha as a 0–1 float at the end of rgba(). Android XML puts it first, as two hex digits at the front of an eight-digit value. Getting the order wrong produces a wildly wrong colour rather than a subtle one, which at least makes the mistake easy to spot.

How to use the hex to rgb converter

  1. Paste or pick your colour — HEX, rgb() and hsl() inputs are all accepted.
  2. Read every format at once, including the SwiftUI and Jetpack Compose literals.
  3. For Android XML, note the alpha digits come first: #FFRRGGBB, not #RRGGBBAA.
  4. Use the HSL value as your starting point if you need to build a tonal ramp from this colour.
  5. Copy all formats in one go to paste into whichever platform file you are in.

Use it with

  • Color Picker from Image — Pull a palette out of any image, assign it to screen roles, and export it as tokens or native code.
  • Contrast Checker — Test any pair against WCAG 2 and the newer APCA method, with a colour-blind check and the nearest passing colours.
  • Gradient Generator — Build linear, radial and conic gradients with as many stops as you need, then export to CSS, SwiftUI, Compose, React Native or Flutter.

Frequently asked questions

How do I convert a HEX colour to RGB by hand?
Split the six digits into three pairs and convert each from base 16 to base 10. #6366F1 becomes 63→99, 66→102, F1→241, or rgb(99, 102, 241). This tool does it instantly, along with HSL and the platform formats.
What is the Android colour format with eight digits?
#AARRGGBB — the alpha channel comes first, unlike CSS where alpha goes last. #80FF0000 is red at 50% opacity. Getting the order backwards produces a very obviously wrong colour.
How do I use a HEX colour in SwiftUI?
SwiftUI's Color initialiser takes red, green and blue as 0–1 doubles rather than 0–255 integers, so each channel is divided by 255. The converter outputs the ready-made Color(red:green:blue:) literal.

Related tools