RGB Color Codes
Pick a color using the RGB sliders, get instant HEX, rgb() and CSS variable output. Includes 140+ searchable CSS named colors with swatches and closest-color matching.
Last updated: May 2026
Quick presets
Adjust the sliders or type a value to pick your color.
CSS Named Colors
All 140+ browser-recognized CSS color names, searchable by name, HEX or RGB value. Click any copy button to grab the value directly.
| CSS Name | HEX | RGB | Copy |
|---|
What is RGB?
RGB stands for Red, Green, Blue — the three primary colors of light. Every color your screen displays is a mix of these three channels. Each channel goes from 0 (none of that color) to 255 (full intensity). Combined, three channels of 256 values each produce 16,777,216 distinct colors.
The RGB model is additive: adding more light makes colors brighter. At maximum (255, 255, 255) you get white. At minimum (0, 0, 0) you get black. This is the opposite of pigment-based color mixing (CMYK), where more ink produces darker results.
How RGB values work
Each channel is an integer from 0 to 255. These numbers represent the intensity of one light-emitting diode (or phosphor) inside a pixel. Your screen mixes the emitted red, green and blue light optically — your eye and brain perceive the combined signal as a single color.
| R | G | B | Color result | Notes |
|---|---|---|---|---|
| 255 | 0 | 0 | Red | Full red channel only |
| 0 | 255 | 0 | Lime green | Full green channel only |
| 0 | 0 | 255 | Blue | Full blue channel only |
| 255 | 255 | 0 | Yellow | Red + green, no blue |
| 0 | 255 | 255 | Cyan | Green + blue, no red |
| 255 | 0 | 255 | Magenta | Red + blue, no green |
| 128 | 128 | 128 | Gray | Equal mid-value on all channels |
| 255 | 165 | 0 | Orange | Strong red, mid green, no blue |
| 75 | 0 | 130 | Indigo | Low red, no green, moderate blue |
RGB to HEX — how the conversion works
HEX is simply RGB written in base-16 (hexadecimal). Each channel value (0–255) becomes a two-digit hex pair (00–FF). The three pairs are concatenated with a # prefix.
Formula: for each channel value V, convert to hex: V.toString(16).padStart(2, '0').toUpperCase()
| Decimal | Hex pair | Example |
|---|---|---|
| 0 | 00 | R=0 → 00 |
| 255 | FF | R=255 → FF |
| 128 | 80 | R=128 → 80 |
| 99, 157, 242 | 63 9D F2 | #6399F2 (cornflower blue range) |
| 255, 87, 51 | FF 57 33 | #FF5733 (tomato-orange) |
RGB vs HEX vs HSL — when to use which
| Format | Example | Best for | Not ideal for |
|---|---|---|---|
| RGB | rgb(99, 157, 242) | LED control code, microcontrollers, NeoPixel, WLED, canvas API, image processing | Human readability, quick color tweaks |
| HEX | #6399F2 | CSS stylesheets, design tools (Figma, Sketch), HTML attributes, compact references | Programmatic manipulation |
| HSL | hsl(219, 84%, 67%) | Intuitive color editing — adjust hue without touching saturation/lightness, theming systems | Direct hardware LED control |
Practical uses
- Web design & CSS: Use
rgb()directly in CSS or store as a HEX shorthand. CSS custom properties (variables) like--primary: #6399F2;make it easy to update colors site-wide from one place. - LED strip projects & WLED: WS2812B, SK6812 and most addressable LED strips are controlled by setting three byte values per LED. WLED's live API expects
{"r":99,"g":157,"b":242}. FastLED and NeoPixel libraries use the same R/G/B integer format. - Arduino / ESP32:
strip.setPixelColor(0, strip.Color(99, 157, 242));— the three integers come directly from this tool. - UI design: Use the CSS variable output (
--color: #6399F2;) in your design token system. Works with Tailwind CSS custom colors, Material UI theme definitions, and any CSS custom property–based theming. - Digital art & image editing: Photoshop, GIMP, Affinity Photo — all accept RGB values directly in their color pickers.
- 3D printing RGB LEDs: Printer enclosures with NeoPixel strips or WLED-controlled lighting need these exact integer values.
Frequently Asked Questions
What does rgb(0, 0, 0) mean?
All three channels at zero means no light at all — the result is pure black. A display pixel showing rgb(0, 0, 0) emits no red, green or blue light. This is the darkest possible value in the RGB model.
Why does the same HEX code look different on my phone vs my monitor?
Color rendering depends on your screen's color profile, calibration and backlight. OLED panels have deeper blacks and more saturated colors than LCD. Screens also have different color gamuts — a standard sRGB monitor and a Display P3 iPhone show the same HEX value differently. The RGB values themselves are identical; the hardware renders them differently.
Can I use rgba() instead of rgb() in CSS?
Yes. rgba(R, G, B, A) adds an alpha (opacity) channel from 0 (fully transparent) to 1 (fully opaque). For example: rgba(99, 157, 242, 0.5) makes a 50% transparent version of the color. In modern CSS you can also write rgb(99 157 242 / 50%) — the newer syntax without commas, supported in all modern browsers since 2020.
How do I enter an RGB color into WLED?
In the WLED web UI, go to the color picker and look for the R/G/B input boxes directly below the color wheel. Enter your three values (0–255 each). For JSON API control, send a POST to /json/state with {"seg":[{"col":[[R,G,B]]}]}. Some WLED integrations (like Home Assistant) also accept the RGB tuple directly as a service attribute.
What is the difference between 8-bit RGB and 16-bit RGB?
Standard 8-bit RGB uses 256 levels per channel (0–255), giving 16.7 million colors. 16-bit RGB uses 65,536 levels per channel (0–65535), producing over 281 trillion colors. The extra precision matters for professional photo editing, HDR displays and certain medical imaging. Web browsers and most LED controllers use 8-bit (0–255) RGB. This tool works with 8-bit values.
Why is "Lime" different from "Green" in CSS?
In CSS, green is rgb(0, 128, 0) — half-brightness green. lime is rgb(0, 255, 0) — full-brightness green. This naming follows the original HTML4 color list where "green" was defined at half intensity to match common monitor output of the era. If you want full-intensity green in CSS, use lime or #00FF00, not green.
How do I convert a CSS color name to RGB values?
Use the CSS Named Colors table on this page — search for the name and read the RGB column. Or type the name into a browser console: document.body.style.color = 'cornflowerblue'; getComputedStyle(document.body).color — the browser returns rgb(100, 149, 237). This tool also shows the closest named color for any RGB combination you pick.