Color Library
Browse every color family with HEX, RGB, HSL and accessibility data. Each family page includes representative colors, shades, complementary colors and practical usage notes.
Color families
Twelve core families cover the color wheel plus neutrals.
Red
Warm, urgent and attention-grabbing. Used for alerts, calls to action and brand accents.
Orange
Energetic and warm. Communicates enthusiasm, creativity and appetite.
Yellow
Bright and cheerful. Often associated with optimism, warmth and clarity.
Green
Natural and balanced. Frequently linked to growth, health and success.
Cyan
Fresh and clear. Sits between blue and green, often associated with water and technology.
Blue
Calm and trustworthy. One of the most widely used colors in brand and interface design.
Purple
Creative and refined. Historically linked to royalty and luxury.
Pink
Playful and romantic. Soft pink is gentle; hot pink is bold and expressive.
Brown
Earthy and grounded. Communicates reliability, warmth and simplicity.
Gray
Neutral and calm. The backbone of most interface palettes.
Black
Formal and bold. Ideal for high-contrast text and premium interfaces.
White
Clean and spacious. Creates breathing room and reflects light.
Named colors and semantic collections
Beyond hue families, we index the standard CSS named colors and a set of curated semantic palettes.
Named CSS Colors
All 148 CSS named colors, with hex, RGB and quick-copy swatches.
Brand Colors
Curated brand-ready palettes drawn from successful product and consumer brands.
UI Colors
Semantic interface tokens — surface, border, text, primary, danger, success.
SaaS Colors
Palettes and accents used across modern SaaS products and dashboards.
Healthcare Colors
Trust-based palettes for medical, wellness and health platforms.
Luxury Colors
Deep tones, golds and jewel accents used in premium branding.
How to use the color library
Each family page opens with a set of representative colors — a light, a mid and a dark tone from the family — followed by a longer list of associated colors and their hex, RGB and HSL values. Every value is clickable for one-click copy.
-
Pick a familyStart with the message you want to send. Blues and greens feel calm; reds and oranges feel urgent; yellows and pinks feel playful.
-
Choose a lightnessWithin a family, pick a light, mid or dark variant. Light variants work for surfaces and backgrounds; dark variants work for text and borders.
-
Check contrastUse the contrast checker to make sure any foreground/background pairing you choose passes WCAG AA.
-
Generate variantsTurn any base color into a full 50–950 scale with the shades generator, ready for design tokens and CSS variables.
Color families at a glance
| Family | Hue range | Temperature | Common uses |
|---|---|---|---|
| Red | 345°–15° | Warm | Alerts, calls to action, food brands |
| Orange | 15°–45° | Warm | Energy, creativity, retail |
| Yellow | 45°–70° | Warm | Optimism, children, warnings |
| Green | 70°–160° | Cool | Nature, health, finance |
| Cyan | 160°–200° | Cool | Technology, water, clarity |
| Blue | 200°–250° | Cool | Trust, calm, corporate |
| Purple | 250°–290° | Cool | Creativity, luxury, spirituality |
| Pink | 290°–345° | Warm | Playful, romantic, beauty |
| Brown | 20°–45° (dark, muted) | Warm | Earthy, rustic, reliable |
| Gray | Any hue, low saturation | Neutral | UI surfaces, text, dividers |
| Black | Any hue, near-zero lightness | Neutral | Contrast, premium, editorial |
| White | Any hue, near-max lightness | Neutral | Backgrounds, breathing room |
Frequently asked questions
How many colors are in the library?
Twelve families plus the 148 CSS named colors plus a curated set of semantic collections. Family pages show representative colors with their hex, RGB and HSL values — a starting point you can extend with the tools.
Can I search for a specific hex code?
Are these colors free to use?
Yes. Colors themselves are not copyrightable. Every hex value on this site can be used in any project, commercial or personal, without attribution.
Do you have a full list of CSS named colors?
Yes — see the Named CSS Colors page. It lists every color defined in CSS Color Module Level 4 with its hex and RGB values.
How do I pick a color for my brand?
Start with the emotion you want to communicate, pick a family that fits, then choose a mid-tone and generate a full scale. Our guide to choosing website colors walks through the full process.