Popular Color Codes for Designers
Finding the perfect color for your design project starts with understanding color values. Every color has three key representations: a hex code (like #87A878 for sage green), an RGB value that specifies red, green, and blue components, and an HSL value that describes hue, saturation, and lightness. Each format is useful in different contexts — hex codes are standard in CSS and design tools, RGB values are important for digital media, and HSL is intuitive for adjusting and creating color variations.
Browse our curated collection of 20 popular design colors, each with complete color codes, beautiful palettes, and pairing recommendations. Whether you are looking for the exact hex code for dusty rose, terracotta, or navy blue, Colortion gives you everything you need to use color confidently in your next project.
Use Color Codes Across Your Design Workflow
Use these color values as starting points for interfaces, brand systems, social graphics, moodboards, and production-ready CSS.
Color Format Quick Reference
| Format | Example | Best For |
|---|---|---|
| HEX | #87A878 | CSS, Figma, Tailwind config — the standard for web and design tools |
| RGB | rgb(135, 168, 120) | Digital media, video, and screen-based color mixing |
| HSL | hsl(101, 22%, 56%) | Adjusting lightness or saturation while keeping the same hue |
Frequently Asked Questions
What is the difference between a hex code and an RGB value?
A hex code (like #87A878) is a 6-digit base-16 value used in CSS and design tools. RGB expresses the same color as three 0-255 numbers for red, green, and blue. Both describe identical colors in different formats.
Can I use these hex codes directly in CSS or Tailwind?
Yes. Every hex code on Colortion is a valid 6-digit CSS color value — paste it straight into a stylesheet, a Tailwind arbitrary value like bg-[#87A878], or a Figma fill.
Are Colortion color codes free to use in commercial design work?
Yes. Hex, RGB, and HSL values for all 20 colors are free to copy and use in personal and commercial projects with no account needed.
How do I find colors that pair well with a specific color?
Open any color page and check the "Colors That Go With" section, which lists colors that combine well with it, plus palettes that already use it.
Color codes to complete palettes
Build a Palette From Any Color
Pick a color code, explore matching palettes, or open the generator to create a full 5-color palette.