Colors
Octagon's color palette is designed to be flexible, accessible, and visually appealing. All of our colors were provided in OKLCH.
Color Hues
A hue is a fundamental property of color in the field of color theory. It refers to the dominant wavelength of light that is perceived as a specific color. In simpler terms, hue is what we commonly refer to as "color" in everyday language, such as red, blue, green, etc.
- Orange: 52.41
- Cyan: 268.22
- Magenta: 351.06
- Gray: 52.41
Color Shades
| example | name | value |
|---|---|---|
orange-100 | orange-100 | oklch(98.59% 0.137 52.41) |
orange-200 | orange-200 | oklch(91.46% 0.137 52.41) |
orange-300 | orange-300 | oklch(84.33% 0.137 52.41) |
orange-400 | orange-400 | oklch(76.90% 0.137 52.41) |
orange-500 | orange-500 | oklch(69.47% 0.137 52.41) |
orange-600 | orange-600 | oklch(59.35% 0.137 52.41) |
orange-700 | orange-700 | oklch(49.24% 0.137 52.41) |
orange-800 | orange-800 | oklch(34.45% 0.137 52.41) |
orange-900 | orange-900 | oklch(19.65% 0.137 52.41) |
cyan-100 | cyan-100 | oklch(82.64% 0.085 268.22) |
cyan-200 | cyan-200 | oklch(75.70% 0.085 268.22) |
cyan-300 | cyan-300 | oklch(68.75% 0.085 268.22) |
cyan-400 | cyan-400 | oklch(61.80% 0.085 268.22) |
cyan-500 | cyan-500 | oklch(54.85% 0.085 268.22) |
cyan-600 | cyan-600 | oklch(44.29% 0.085 268.22) |
cyan-700 | cyan-700 | oklch(33.74% 0.085 268.22) |
cyan-800 | cyan-800 | oklch(23.19% 0.085 268.22) |
cyan-900 | cyan-900 | oklch(12.64% 0.085 268.22) |
magenta-100 | magenta-100 | oklch(88.88% 0.141 351.06) |
magenta-200 | magenta-200 | oklch(81.38% 0.141 351.06) |
magenta-300 | magenta-300 | oklch(73.88% 0.141 351.06) |
magenta-400 | magenta-400 | oklch(66.38% 0.141 351.06) |
magenta-500 | magenta-500 | oklch(58.88% 0.141 351.06) |
magenta-600 | magenta-600 | oklch(51.38% 0.141 351.06) |
magenta-700 | magenta-700 | oklch(43.88% 0.141 351.06) |
magenta-800 | magenta-800 | oklch(36.38% 0.141 351.06) |
magenta-900 | magenta-900 | oklch(28.88% 0.141 351.06) |
gray-100 | gray-100 | oklch(94.91% 0 52.41) |
gray-200 | gray-200 | oklch(84.52% 0 52.41) |
gray-300 | gray-300 | oklch(72.52% 0 52.41) |
gray-400 | gray-400 | oklch(59.99% 0 52.41) |
gray-500 | gray-500 | oklch(46.40% 0 52.41) |
gray-600 | gray-600 | oklch(39.42% 0 52.41) |
gray-700 | gray-700 | oklch(32.11% 0 52.41) |
gray-800 | gray-800 | oklch(24.35% 0 52.41) |
gray-900 | gray-900 | oklch(15.91% 0 52.41) |
Use this color palette consistently across your interfaces to maintain visual coherence and reinforce brand identity.
Color Usage Guidelines
Proper use of color enhances user experience, guides attention, and conveys meaning in interfaces.
Best Practices
- Use orange colors for main actions and key UI elements
- Use gray colors for text, backgrounds and disabled functionalities
- Apply cyan colors for supporting elements and less prominent actions
- Utilize magenta colors to convey status and feedback, this includes the error status
- Ensure sufficient color contrast for accessibility (WCAG 2.1 AA standard)
- Use color consistently across similar elements and states
By following these guidelines, you'll create visually appealing and meaningful color usage in your interfaces.