Color Codes — HEX RGB HSL Converter & Color Chart
Free color codes chart and picker: HEX/RGB/HSL conversion, CSS named colors, Chinese traditional swatches — click to copy any color code.
Color Picker
Pick from the swatch, type HEX / RGB, or drag HSL sliders — all inputs stay in sync
CMYK is a screen approximation; for print, refer to a physical color card
Color Family Matrix
9 families × 10 shades · click a swatch to copy and set as current
90 colors in total · current: —
Shade Scale
4 steps toward white / black from the current color · click to copy HEX
Harmony Schemes
Generated from the current color by hue relation · click a swatch to copy
CSS Named Color Reference
Name · CSS name · HEX · RGB · click a row to copy, "Use" sets it as current
| Color | CSS Name | HEX | RGB |
|---|
Scene Swatch Book
Pick ready-made colors by scene · click a swatch to copy codes, see shades, or use it in the picker
0 swatches · traditional values follow the circulated web edition, to be calibrated against published spectra
About this tool
Free online color codes toolkit that does the whole loop in one page: pick a color (native picker, HEX input, RGB channels or HSL sliders — all four stay in sync), instantly get its HEX / RGB / HSL / CMYK values, browse a color chart of 9 families × 10 shades, read CSS color names with side-by-side values, and explore scene-based swatch books — web staples, macaron, Morandi, business blues and 16 Chinese traditional colors. Click any swatch to copy its code; everything runs locally in your browser.
HEX, RGB, HSL, CMYK — one color, four codes
The same color can be written four ways, and each format answers a different question:
| Format | Looks like | Best for |
|---|---|---|
| HEX | #3B82F6 | CSS, design handoffs, compact sharing |
| RGB | rgb(59, 130, 246) | channel-level edits, alpha in CSS |
| HSL | hsl(217, 91%, 60%) | intuitive hue/saturation/lightness tweaks |
| CMYK | cmyk(76%, 47%, 0%, 4%) | print reference (screen-approximate) |
HEX is just RGB written in hexadecimal — two digits per channel, RRGGBB. HSL describes the same color by hue angle (0-360°), saturation and lightness percentages, which makes "same color, a bit darker" a one-slider move. The converter above keeps all four in sync from any input.
Note on CMYK: screens emit light (RGB) while printers absorb ink (CMYK), so no screen CMYK value is exact — this page computes a standard screen approximation. For print production, always confirm against a physical color card (Pantone etc.).
Shades and harmony: from one color to a palette
Two generators extend any color you pick:
- Shade scale — 9 steps from darkened to lightened, interpolated in RGB (screen-linear). Grab the
800-ish step for text on a light background and the100-ish step for tinted surfaces: the classic UI-card recipe. - Harmony schemes — complementary (180°), analogous (±30°), triadic (120° apart) and split-complementary (150°/210°), rotated in HSV hue. These four cover most of the palettes you see in nature and in product design; click any swatch to copy its HEX.
CSS named colors: 140 words browsers understand
CSS predefines 140 color keywords — tomato, deepskyblue, papayawhip — that every browser renders identically. The reference table above lists the most-used 30 with their Chinese names and exact values. Named colors are handy for quick prototypes and readable code; for production themes, prefer HEX variables so designers and developers share one source of truth.
Chinese traditional colors: 16 hues with 2000-year names
The swatch book includes the classic Chinese palette — Yanzhi rouge (胭脂), Cinnabar (朱砂), Gamboge (藤黄), Moon White (月白), Dai Blue (黛蓝) — color names that date back to dynastic dye and pigment workshops and still drive modern guofeng (national-style) design, game skins and brand visuals. Values follow the commonly circulated web edition; for archival-grade work, cross-check against the Chinese Color Spectrum (中科院色谱) published references.
Who uses this page
- Front-end developers — grab a HEX, verify contrast by luminance, copy HSL for theme tokens
- UI/product designers — build a 9-step shade ramp from a brand color, test harmony schemes
- Content creators — macaron and Morandi swatch books for covers, slides and social posts
- Students and hobbyists — look up color names and codes with a one-click copy
After picking your palette, write with it in the online Markdown editor, count your copy with the word counter, or see all utilities in the toolbox.
FAQ
What is a color code chart (color codes table)?
A color code chart maps each color to its codes (also called a color swatch book or color card). The three most common notations on the web and in design software: HEX hexadecimal (e.g. #FF0000), RGB (e.g. rgb(255, 0, 0)), and HSL (hue/saturation/lightness). The matrix and reference table on this page cover high-frequency colors — one click to copy.
What is the difference between HEX, RGB and HSL?
All three describe the same on-screen color: HEX is RGB written compactly in hexadecimal, six digits as RRGGBB; RGB gives the red/green/blue channels directly as 0-255; HSL describes hue angle + saturation% + lightness%, which makes brightness adjustments intuitive. Enter any format in the picker above and the others update instantly.
How do I look up and copy a color code?
Four ways: ① spot a color in the family matrix and click it — copied and set as current; ② look the name up in the CSS named-color table and click the row; ③ if you know the HEX or RGB, convert it in the picker and hit copy; ④ drag the HSL sliders to tune by feel, then copy any format.
What are web safe colors?
When early displays could only show 256 colors, the 216 combinations of the 00/33/66/99/CC/FF channel steps rendered identically across browsers — the "web safe" palette. Modern devices have no such limit; the matrix on this page works fine for everyday design.