#FFF8EC · #F2C078 · #C4803A · #4A2C12
Use #FFF8EC as the background. Use #F2C078 as the primary accent. Use #C4803A as secondary. Use #4A2C12 as body text/supporting color. Palette mood: Vitamin C Serum — warm, neon, pastel, royal.
Technical breakdown for the Vitamin C Serum 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: 94.5% | 255, 248, 236 | 0%, 3%, 7%, 0% | 38°, 100%, 96% | ||
| Primary Accent Luminance: 57.9% | 242, 192, 120 | 0%, 21%, 50%, 5% | 35°, 82%, 71% | ||
| Secondary Luminance: 27.5% | 196, 128, 58 | 0%, 35%, 70%, 23% | 30°, 54%, 50% | ||
| Body Text Luminance: 3.3% | 74, 44, 18 | 0%, 41%, 76%, 71% | 28°, 61%, 18% |
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 Vitamin C Serum 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 |
|---|---|---|---|---|
| #4A2C12 on #FFF8EC |
Aa Sample Text
| 11.98:1 | AAA | Body text, headings, UI |
| #FFF8EC on #4A2C12 |
Aa Sample Text
| 11.98:1 | AAA | Body text, headings, UI |
| #4A2C12 on #F2C078 |
Aa Sample Text
| 7.58:1 | AAA | Body text, headings, UI |
| #F2C078 on #4A2C12 |
Aa Sample Text
| 7.58:1 | AAA | Body text, headings, UI |
| #4A2C12 on #C4803A |
Aa Sample Text
| 3.91:1 | Fail | Large headings, UI components |
| #C4803A on #4A2C12 |
Aa Sample Text
| 3.91:1 | Fail | Large headings, UI components |
| #C4803A on #FFF8EC |
Aa Sample Text
| 3.06:1 | Fail | Large headings, UI components |
| #FFF8EC on #C4803A |
Aa Sample Text
| 3.06:1 | Fail | Large headings, UI components |
| #C4803A on #F2C078 |
Aa Sample Text
| 1.94:1 | Fail | Decorative use only |
| #F2C078 on #C4803A |
Aa Sample Text
| 1.94:1 | Fail | Decorative use only |
| #F2C078 on #FFF8EC |
Aa Sample Text
| 1.58:1 | Fail | Decorative use only |
| #FFF8EC on #F2C078 |
Aa Sample Text
| 1.58:1 | Fail | Decorative use only |
The Vitamin C Serum 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 #F2C078 on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
30° beside #F2C078 — 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 Vitamin C Serum 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 #FFF8EC for the main background and #F2C078 for primary buttons. This creates a high-contrast focal point.
The contrast ratio between #4A2C12 and #FFF8EC is 11.98:1 (AAA). Ensure your body text remains legible.
The Vitamin C Serum palette contains #FFF8EC, #F2C078, #C4803A, #4A2C12. 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: #4A2C12 on #FFF8EC reaches 12.0: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, #74A8F1, #E1EA80, #1A160F 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.
Vitamin C Serum reads as warm, neon, pastel. Saturated orange drives the personality, grounded by saturated orange — a combination that works best when the very light base gets most of the canvas.
Yes. Individual color values can't be copyrighted, so the Vitamin C Serum 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 Vitamin C Serum's exact values, including the tint and shade ramps shown above.