#E8D8A8 · #F0E4C0 · #D8C090 · #3A2A10
Use #E8D8A8 as the background. Use #F0E4C0 as the primary accent. Use #D8C090 as secondary. Use #3A2A10 as body text/supporting color. Palette mood: Scone & Clotted Cream — warm, traditional, afternoon tea.
Technical breakdown for the Scone & Clotted Cream 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: 69.1% | 232, 216, 168 | 0%, 7%, 28%, 9% | 45°, 58%, 78% | ||
| Primary Accent Luminance: 77.8% | 240, 228, 192 | 0%, 5%, 20%, 6% | 45°, 62%, 85% | ||
| Secondary Luminance: 54.3% | 216, 192, 144 | 0%, 11%, 33%, 15% | 40°, 48%, 71% | ||
| Body Text Luminance: 2.6% | 58, 42, 16 | 0%, 28%, 72%, 77% | 37°, 57%, 15% |
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 Scone & Clotted Cream 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 |
|---|---|---|---|---|
| #3A2A10 on #F0E4C0 |
Aa Sample Text
| 10.91:1 | AAA | Body text, headings, UI |
| #F0E4C0 on #3A2A10 |
Aa Sample Text
| 10.91:1 | AAA | Body text, headings, UI |
| #3A2A10 on #E8D8A8 |
Aa Sample Text
| 9.76:1 | AAA | Body text, headings, UI |
| #E8D8A8 on #3A2A10 |
Aa Sample Text
| 9.76:1 | AAA | Body text, headings, UI |
| #3A2A10 on #D8C090 |
Aa Sample Text
| 7.81:1 | AAA | Body text, headings, UI |
| #D8C090 on #3A2A10 |
Aa Sample Text
| 7.81:1 | AAA | Body text, headings, UI |
| #D8C090 on #F0E4C0 |
Aa Sample Text
| 1.40:1 | Fail | Decorative use only |
| #F0E4C0 on #D8C090 |
Aa Sample Text
| 1.40:1 | Fail | Decorative use only |
| #D8C090 on #E8D8A8 |
Aa Sample Text
| 1.25:1 | Fail | Decorative use only |
| #E8D8A8 on #D8C090 |
Aa Sample Text
| 1.25:1 | Fail | Decorative use only |
| #F0E4C0 on #E8D8A8 |
Aa Sample Text
| 1.12:1 | Fail | Decorative use only |
| #E8D8A8 on #F0E4C0 |
Aa Sample Text
| 1.12:1 | Fail | Decorative use only |
The Scone & Clotted Cream palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
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 #F0E4C0 on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
30° beside #F0E4C0 — 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 Scone & Clotted Cream 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 #E8D8A8 for the main background and #F0E4C0 for primary buttons. This creates a high-contrast focal point.
The contrast ratio between #3A2A10 and #E8D8A8 is 9.76:1 (AAA). Ensure your body text remains legible.
The Scone & Clotted Cream palette contains #E8D8A8, #F0E4C0, #D8C090, #3A2A10. 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: #3A2A10 on #F0E4C0 reaches 10.9:1 (AAA). 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, #839BE2, #E3EDC5, #171611 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.
Scone & Clotted Cream reads as warm, traditional, afternoon tea. Gently saturated orange 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 Scone & Clotted Cream 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 Scone & Clotted Cream's exact values, including the tint and shade ramps shown above.