#C8A878 · #8E9A7A · #5E6E7A · #E8D8B0
Use #C8A878 as the background. Use #8E9A7A as the primary accent. Use #5E6E7A as secondary. Use #E8D8B0 as body text/supporting color. Palette mood: Super 8 — vintage, warm, moody, pastel.
Technical breakdown for the Super 8 color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 41.6% | 200, 168, 120 | 0%, 16%, 40%, 22% | 36°, 42%, 63% | ||
| Primary Accent Luminance: 30.3% | 142, 154, 122 | 8%, 0%, 21%, 40% | 82°, 14%, 54% | ||
| Secondary Luminance: 14.9% | 94, 110, 122 | 23%, 10%, 0%, 52% | 206°, 13%, 42% | ||
| Body Text Luminance: 69.4% | 232, 216, 176 | 0%, 7%, 24%, 9% | 43°, 55%, 80% |
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Super 8 palette — click any swatch to copy its hex.
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #E8D8B0 on #5E6E7A |
Aa Sample Text
| 3.73:1 | Fail | Large headings, UI components |
| #5E6E7A on #E8D8B0 |
Aa Sample Text
| 3.73:1 | Fail | Large headings, UI components |
| #5E6E7A on #C8A878 |
Aa Sample Text
| 2.34:1 | Fail | Decorative use only |
| #C8A878 on #5E6E7A |
Aa Sample Text
| 2.34:1 | Fail | Decorative use only |
| #E8D8B0 on #8E9A7A |
Aa Sample Text
| 2.11:1 | Fail | Decorative use only |
| #8E9A7A on #E8D8B0 |
Aa Sample Text
| 2.11:1 | Fail | Decorative use only |
| #5E6E7A on #8E9A7A |
Aa Sample Text
| 1.77:1 | Fail | Decorative use only |
| #8E9A7A on #5E6E7A |
Aa Sample Text
| 1.77:1 | Fail | Decorative use only |
| #E8D8B0 on #C8A878 |
Aa Sample Text
| 1.60:1 | Fail | Decorative use only |
| #C8A878 on #E8D8B0 |
Aa Sample Text
| 1.60:1 | Fail | Decorative use only |
| #8E9A7A on #C8A878 |
Aa Sample Text
| 1.32:1 | Fail | Decorative use only |
| #C8A878 on #8E9A7A |
Aa Sample Text
| 1.32:1 | Fail | Decorative use only |
The Super 8 palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
directly opposite #8E9A7A on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
30° beside #8E9A7A — a calm secondary that extends the palette without adding tension
a ink-black carrying the palette's own hue — perfect for surfaces and dividers
To use this Super 8 color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Use #C8A878 for the main background and #8E9A7A for primary buttons. This creates a high-contrast focal point.
The contrast ratio between #E8D8B0 and #C8A878 is 1.60:1 (Fail). Ensure your body text remains legible.
The Super 8 palette contains #C8A878, #8E9A7A, #5E6E7A, #E8D8B0. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Yes for its strongest pairings: #E8D8B0 on #5E6E7A reaches 3.7:1 (Fail). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
Beyond its own four colors, #85799A, #81957E, #171512 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
Super 8 reads as vintage, warm, moody. Muted yellow-green drives the personality, grounded by gently saturated orange — a combination that works best when the light base gets most of the canvas.
Yes. Individual color values can't be copyrighted, so the Super 8 palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Super 8's exact values, including the tint and shade ramps shown above.