Color Name to RGB Converter
Convert CSS color names to RGB values for use in programming, design tools, and CSS. RGB format is widely supported and useful for color calculations and manipulation.
Popular Color Names to RGB
| Color Name | RGB | Description |
|---|---|---|
| red | rgb(255, 0, 0) | Pure red |
| lime | rgb(0, 255, 0) | Pure green |
| blue | rgb(0, 0, 255) | Pure blue |
| white | rgb(255, 255, 255) | All colors |
| black | rgb(0, 0, 0) | No colors |
| coral | rgb(255, 127, 80) | Orange-pink |
| teal | rgb(0, 128, 128) | Blue-green |
| gold | rgb(255, 215, 0) | Metallic yellow |
Why Use RGB?
| Scenario | Benefit |
|---|---|
| JavaScript | Easy to manipulate values |
| Canvas API | Required format |
| Animations | Smooth transitions |
| Calculations | Mathematical operations |
CSS RGB Usage
``css
.element {
/* Using named color */
color: steelblue;
/* Equivalent RGB */
color: rgb(70, 130, 180);
}
`
Use this converter to get RGB values for color manipulation in code.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
`
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than
its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp
looking like one hue rather than a fade to grey.
The 148 CSS Colour Keywords
CSS defines a fixed list — 148 names covering 147 distinct colours, since gray and
grey (and aqua/cyan, magenta/fuchsia) are aliases.
| Name | HEX | Note |
|---|---|---|
red | #FF0000 | Full intensity |
green | #008000 | Half intensity — lime is #00FF00 |
blue | #0000FF | Full intensity |
purple | #800080 | Half intensity |
gray / grey | #808080 | Both spellings valid |
aqua / cyan | #00FFFF | Identical |
rebeccapurple | #663399 | Added in 2014 in memory of Rebecca Meyer |
The green trap catches people repeatedly: the keyword is the dark VGA green, and the
bright one everybody pictures is lime.Why Not to Use Them in Production
Named colours are excellent for prototyping and debugging — border: 1px solid red while
you find a layout problem — and poor as a design system.
You get 148 and no more. Any brand colour needs a hex value anyway.They carry no semantics.tomatotells a reader nothing about what it is for;
--color-danger does.
There are no ramps.darkblueis not a computed shade ofblue— it is an
unrelated fixed value, so the two do not form a scale.Define tokens instead:
`css
:root {
--color-danger: #dc2626;
--color-danger-bg: #fef2f2;
}
``
One place to change, a name that survives a rebrand, and a ramp you control.