Color codes, palettes, and guides for product design
Explore 20 colors with copyable HEX, RGB, and HSL codes, interactive shades, and contrast comparisons. Then build a palette for your interface.
Live React previews. Copyable code. Made for your next product.
Start here.
How to create a UI color palette, step by step
Build a UI color palette with semantic roles, copyable CSS tokens, contrast checks, and a practical review checklist.
How to create semantic color tokens for UI
Map primitive colors to semantic UI tokens, document states and themes, and validate meaning with a small implementation example.
How to check color contrast in a UI
Check text and interface contrast with a live calculator, WCAG reference thresholds, state-by-state examples, and a review checklist.
Explore colors.
23 resources to explore
Step-by-step guides 3
Work through a practical design task from start to finish.
How to create a UI color palette, step by step
Build a UI color palette with semantic roles, copyable CSS tokens, contrast checks, and a practical review checklist.
How to create semantic color tokens for UI
Map primitive colors to semantic UI tokens, document states and themes, and validate meaning with a small implementation example.
How to check color contrast in a UI
Check text and interface contrast with a live calculator, WCAG reference thresholds, state-by-state examples, and a review checklist.
Color codes 20
Find a color, copy its codes, and check contrast.
Red color codes: #FF0000
Red HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Orange color codes: #FFA500
Orange HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Yellow color codes: #FFFF00
Yellow HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Green color codes: #008000
Green HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Lime color codes: #00FF00
Lime HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Blue color codes: #0000FF
Blue HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Navy color codes: #000080
Navy HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Cyan color codes: #00FFFF
Cyan HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Teal color codes: #008080
Teal HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Purple color codes: #800080
Purple HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Pink color codes: #FFC0CB
Pink HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Magenta color codes: #FF00FF
Magenta HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Coral color codes: #FF7F50
Coral HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Lavender color codes: #E6E6FA
Lavender HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Beige color codes: #F5F5DC
Beige HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Brown color codes: #A52A2A
Brown HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Gray color codes: #808080
Gray HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Black color codes: #000000
Black HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
White color codes: #FFFFFF
White HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Gold color codes: #FFD700
Gold HEX, RGB, and HSL values, tints and shades, text contrast, and practical UI examples.
Give your workflow
a new set of skills.
Reusable AI skills from the TDP team. Explore the collection and find a practical starting point for your next project.
Explore the skills repo