Color Naming
Name colors from HEX/RGB/HSL with confidence, format conversion, distribution and palette generation for design and frontend development
Pick a Color
Color Name
Color Formats
Color Distribution
Palette
Color Naming Guide
What is color naming?
Color naming is the process of turning numeric color values (HEX, RGB, HSL) into human-friendly names.
This tool helps designers and developers name colors faster for UI tokens, component libraries and design handoff.
Tip：This tool matches the nearest name using a weighted algorithm across color spaces. Different spaces and weights may lead to different results.
Color spaces
- RGB - red/green/blue additive model
- HSL - hue, saturation, lightness; closer to human perception
- HSB/HSV - hue, saturation, brightness/value; similar to HSL
- CMYK - cyan, magenta, yellow, black; used for printing
- Lab - perceptual lightness and chroma components
Supported inputs
- HEX - e.g. #FF0000, #F00
- RGB/RGBA - e.g. rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
- HSL/HSLA - e.g. hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
- Named colors - e.g. red, coral, skyblue
How to use
- Pick a color via the picker, presets, or by typing a value.
- Get the nearest name and a confidence score.
- Copy the formats you need (HEX, RGB, HSL, CMYK, etc.).
- Generate palettes: complementary, analogous, triadic, split complementary.
- Copy the color name for documentation and handoff.
Palette types
| Type | Description | Use cases |
|---|---|---|
| Complementary | Two hues opposite on the color wheel (180°) | Strong contrast, highlight focus |
| Analogous | Neighboring hues (about 30° steps) | Harmonious, soft schemes |
| Triadic | Three hues evenly spaced (120°) | Vibrant, balanced palettes |
| Split complementary | Colors adjacent to the complement | Contrast without being too intense |
Common name reference
| Color | Chinese | English | HEX |
|---|---|---|---|
| 红色 | Red | #FF0000 | |
| 橙色 | Orange | #FFA500 | |
| 黄色 | Yellow | #FFFF00 | |
| 绿色 | Green | #00FF00 | |
| 蓝色 | Blue | #0000FF | |
| 紫色 | Purple | #800080 | |
| 品红 | Magenta | #FF00FF |
FAQ
This tool matches against a preset name list. When there is no exact entry, it returns the closest name and a confidence score. Try small adjustments to get a better match.
It is based on RGB distance with additional weighted differences in hue, saturation and lightness. Higher confidence means the color is closer to a preset entry.
HSB (Brightness) and HSV (Value) are commonly used as different names for the same model and are effectively equivalent in practice.
Different tools use different color dictionaries and matching algorithms (RGB-only vs perceptual models like Lab), so results can vary.