Figma hands you #2A9D8F. A canvas script wants three numbers. Unity wants three decimals between 0 and 1. A Kotlin file wants 0xFF2A9D8F. One teal, four spellings. Paste the hex once and copy the spelling your file needs.
Reading #2A9D8F without a converter
A six-digit hex code is three bytes written in base 16. Split the code into pairs, one pair per channel: red, green, blue. Each pair runs from 00 to FF, which is 0 to 255 in decimal.
To turn a pair into a number, multiply the first digit by 16, then add the second. Letters stand in for the values past 9: A is 10, B is 11, C is 12, D is 13, E is 14, F is 15.
| Channel | Pair | Math | Value |
|---|---|---|---|
| Red | 2A | 2 × 16 + 10 | 42 |
| Green | 9D | 9 × 16 + 13 | 157 |
| Blue | 8F | 8 × 16 + 15 | 143 |
Result: rgb(42, 157, 143). The Byte by byte panel above runs these same steps on whatever you type, which helps when you need to double check a value someone pasted into a ticket or a design review.
Three, four, six, or eight digits
#RGB- Each digit doubles.
#3AFreads as#33AAFF, so rgb(51, 170, 255). A frequent hand-conversion slip is padding with zeros instead, giving#30A0F0, a duller blue. #RGBA- Same doubling, with the fourth digit as alpha.
#3AF8becomes#33AAFF88, alpha 136 out of 255, or 0.533. #RRGGBB- The standard form. Every browser, design tool, and style guide reads this one.
#RRGGBBAA- The last pair is alpha out of 255.
#26465380gives rgba(38, 70, 83, 0.502).
Hex alpha has 256 steps, not 100, so 50 percent has no exact pair. 7F lands on 0.498 and 80 on 0.502. Pick 80 and move on. The gap is one step out of 255, below what a screen shows.
The Android trap: alpha goes first
CSS puts alpha at the end, #RRGGBBAA. Android color resources, Jetpack Compose, and Flutter's Color(0x...) put alpha at the front, #AARRGGBB.
Paste the CSS value #26465380 into an Android colors.xml and Android reads 26 as alpha. You get rgb(70, 83, 128) at 15 percent opacity, a pale gray-blue wash, instead of a half-transparent slate.
The Android / Flutter row moves the alpha byte to the front for you. #26465380 comes out as 0x80264653. A six-digit code gets FF up front, since Android treats a missing alpha in a 32-bit int as zero, which means invisible.
Which row to copy
| Row | Example | Where the value goes |
|---|---|---|
| CSS | rgb(42, 157, 143) | Any stylesheet, any browser, inline styles in HTML email |
| CSS, space syntax | rgb(42 157 143 / 50%) | Modern CSS, relative color syntax, design tokens built on CSS Color 4 |
| 0 to 1 floats | 0.165, 0.616, 0.561 | Unity Color, SwiftUI Color(red:green:blue:), WebGL uniforms, matplotlib |
| Plain triple | 42, 157, 143 | Python Pillow, Processing, spreadsheets, token JSON files |
| Android / Flutter | 0xFF2A9D8F | Kotlin, Compose, Flutter, Android colors.xml with a # instead of 0x |
Converting a stylesheet in one pass
Switch to the Stylesheet tab when you have a block of custom properties, a Tailwind theme, or an old CSS file headed for a design system migration. Paste the text. Every hex value shows up in a table with its RGB result and the line numbers where the code appears. The right-hand box holds the same text with each hex swapped for rgb(). Comments, selectors, and indentation stay put.
Repeats collapse into one row. #2a9d8f and #2A9D8F count as the same color, so a file where white shows up forty times still gives you a short, readable list.
Where this converter stops
- sRGB only. Browsers read every hex code as sRGB. A hex copied from a Figma file set to Display P3 describes a P3 color, so the page renders duller than the mockup. Fix the color profile in the design tool first, or write the color with CSS
color(display-p3 ...). - Hex in, nothing else. Named colors such as
tomato, plushsl()andrgb()input, are not parsed. For the reverse trip, use the RGB to HEX converter. - ID selectors get caught. Stylesheet mode treats any # followed by 3, 4, 6, or 8 hex letters as a color. An ID named
#fadeor#badlands in the table too. Scan the list before pasting rewritten text into production. - Float rows round to three places. 42 ÷ 255 is 0.16470…, shown as 0.165. Shader code needing an exact round trip should divide by 255 at runtime.
