Spanish Palette
Earthy — ochre, terracotta and stone with two deep purples. Warm neutrals are rare in this collection and this is where they are.
Everything below is the real component. Change the controls, tab through it, and turn on Inspector Mode to read any value off the screen.
01 · Text colours
A palette ships hues, not a text ramp. These five are solved against the page background rather than mixed by percentage — "secondary" means 8:1 on every one of the fourteen palettes, so the pages stay comparable and none of them ships a ramp that fails. Disabled sits below the floor deliberately; it is the one role WCAG exempts.
#f6f5f4Derived · near-white holding 8% of Crocodile Tooth's hue — this palette ships no neutral pale enough for body copy14.84:1#b6b6bdDerived · solved to 8:1 on the page8.01:1#9696a1Derived · solved to 5.5:15.52:1#878693Derived · solved to 4.5:1 — the floor for body text4.51:1#606072Derived · solved to 2.6:1, deliberately below the floor2.63:102 · Surfaces and backgrounds
Anchored on Lucky Point, the darkest colour in the set. The rest of the ladder is computed, because no palette ships two darks that happen to sit 16% apart — and depth read from surface lightness is the only kind that survives greyscale, high-contrast mode and a phone in sunlight.
#1e1e39Derived · 32% toward black from Lucky Point#252547Derived · 16% toward black from Lucky Point#2c2c54Row 2, Col 1 · Lucky Point#3b3b60Derived · 7% toward white from the elevated surface#42415fDerived · solved to 1.5:1 on the surface — visible, not loud1.50:1#707085Derived · solved to 3:1 — the floor for a control boundary3.03:103 · Semantic colours
Primary is the palette’s opening colour — designers lead with their signature. The status roles are the nearest hue this palette carries to each target, which is the honest version of a choice usually made by eye. Hover prefers a darker sibling the designer actually drew; active is always computed. Where a role sits far from its ideal hue, the row says so.
Label on the fill: white at 4.28:1 — under 4.5:1, so this fill can only carry large text. · Hover is a palette colour.
Label on the fill: the page colour at 9.01:1 · Hover is a palette colour.
Label on the fill: the page colour at 6.25:1 · Hover is a palette colour.
Label on the fill: the page colour at 11.97:1 · Hover is a palette colour.
Label on the fill: the page colour at 6.20:1 · Hover is a palette colour.
Label on the fill: the page colour at 5.06:1 · Hover is a palette colour.
04 · Component examples
The moment the palette stops being a picture. Filled, outlined and text buttons across five roles, four field states, and the selection controls — a colour that read as confident in a swatch grid often cannot hold a five-character label, and there is no way to discover that except by putting the label on it.
Buttons
Input fields
Checkbox, radio and switch
05 · Chart colours
Eight hues spread around the circle, each required to clear 3:1 against the page — under WCAG 1.4.11 a chart mark is a meaningful graphic, so a series nobody can see is not a style choice. This set is kept separate from the semantic roles on purpose: a series that happens to be red must not read as a failure.
Eight hues spread around the circle, every one of them measured at 3:1 or better against this page — a chart mark is a meaningful graphic, not decoration. None of them carries a status meaning, which is the entire reason this set is separate from the one above.
06 · Alerts and notifications
The four status roles doing the job they exist for, each with an icon and a word alongside the fill. Run these through a greyscale filter — if you can still tell the error from the success, colour was reinforcing the message rather than carrying it.
Every one of these carries an icon and a word as well as a fill. Remove the colour and the four are still distinguishable — which is the test, because for a good number of readers the colour was never there.
07 · Elevation
The one part of the system that is not derived from the palette and never should be. Shadows are black at rising alpha on every palette on earth; on a page this dark they barely register, which is why the surface ladder in section 02 is what actually carries depth.
Black at rising alpha, on every palette. A shadow is the absence of light, so tinting it with the brand hue is how a dark theme starts looking bruised. On very dark pages the shadow does almost nothing and the surface ladder above is what carries depth.
Not a checklist to run at the end. These are the requirements the component was built from.
Contrast
- 5 of 20 colours clear 4.5:1 against white and can carry body text on a light page. 15 clear it against black. None do both.
- Those two sets are nearly disjoint for a reason, not by accident: a colour’s contrast with white multiplied by its contrast with black is always exactly 21. Clearing 4.5:1 on one surface leaves at most 4.67:1 on the other.
- 10 of 20 reach 3:1 on white, which is the bar for large text, icons, borders and chart marks — a much larger set, and the one most of this palette is genuinely for.
- White and black are the bounds, not our surfaces. Against a real canvas the numbers move, and alpha moves them again — composite first or the ratio is fiction.
Keyboard
| Tab | Moves through the swatches; each one is a button that copies its value. |
| ⌘I | Inspector Mode reports the live contrast of anything on this page. |
Screen readers
- A colour has no accessible meaning. If a chart series is identified only by its fill, the series does not exist for a screen reader — label it directly or provide the table.
- Colour names like “Jigglypuff” or “Wet Asphalt” are identifiers, not descriptions. Never use one as the only label for a state.
Focus & touch
- Swatches take the standard focus ring, offset outwards. An inset ring would have to sit on the colour being demonstrated and would fail contrast on roughly half of these values.
- Swatches are 88px tall and at least 152px wide, comfortably past the 44px minimum, so the copy affordance is reachable on a phone without a precise tap.
| Attribute | Applied to | Notes |
|---|---|---|
| aria-label | Each swatch | Names the colour and its value, because the swatch itself announces as nothing — a background colour is invisible to a screen reader. |
| forced-colors: active | Media query | Windows High Contrast Mode discards this palette wholesale. Anything that was only distinguishable by fill becomes identical. |
Example usage
What this palette is for, and what it is not for.
1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const ES_SERIES = [4 'var(--flat-es-desert)', // Desert5 'var(--flat-es-mandarin-sorbet)', // Mandarin Sorbet6 'var(--flat-es-celestial-green)', // Celestial Green7 'var(--flat-es-crocodile-tooth)', // Crocodile Tooth8 'var(--flat-es-spiced-butternut)', // Spiced Butternut9 'var(--flat-es-swan-white)', // Swan White10]1112<Chart series={data} colors={ES_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Jacksons Purple takes #ffffff at 9.41:1.16<span style={{17 background: 'var(--flat-es-jacksons-purple)',18 color: '#ffffff',19}}>20 Jacksons Purple21</span>CSS
The twenty plus the 37 they were expanded into. 13 of those are literal palette colours; the rest are computed, and each carries the arithmetic that produced it.
/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
be mistaken for one of ours. ---------------------------------------- */
/* Spanish Palette — Miguel Camacho, Flat UI Colors 2 */
:root {
--flat-es-jacksons-purple: #40407a;
--flat-es-c64-purple: #706fd3;
--flat-es-swan-white: #f7f1e3;
--flat-es-summer-sky: #34ace0;
--flat-es-celestial-green: #33d9b2;
--flat-es-lucky-point: #2c2c54;
--flat-es-liberty: #474787;
--flat-es-hot-stone: #aaa69d;
--flat-es-devil-blue: #227093;
--flat-es-palm-springs-splash: #218c74;
--flat-es-fluorescent-red: #ff5252;
--flat-es-synthetic-pumpkin: #ff793f;
--flat-es-crocodile-tooth: #d1ccc0;
--flat-es-mandarin-sorbet: #ffb142;
--flat-es-spiced-butternut: #ffda79;
--flat-es-eye-of-newt: #b33939;
--flat-es-chilean-fire: #cd6133;
--flat-es-grey-porcelain: #84817a;
--flat-es-alameda-ochre: #cc8e35;
--flat-es-desert: #ccae62;
}
/* ---- The system derived from them. This is the half a palette does not
ship, and the half a product cannot be built without. -------------- */
/* Spanish Palette — a dark theme derived from the twenty.
Miguel Camacho, Flat UI Colors 2. Values marked "taken" are the palette's own;
everything else is computed from them by the rules on this page. */
:root {
/* surfaces */
--es-page: #1e1e39; /* derived */
--es-surface: #252547; /* derived */
--es-elevated: #2c2c54; /* taken */
--es-hover: #3b3b60; /* derived */
--es-border: #42415f; /* derived */
--es-border-strong: #707085; /* derived */
/* text */
--es-text: #f6f5f4; /* 14.8:1 on the page */
--es-text-secondary: #b6b6bd; /* 8.0:1 on the page */
--es-text-tertiary: #9696a1; /* 5.5:1 on the page */
--es-text-muted: #878693; /* 4.5:1 on the page */
--es-text-disabled: #606072; /* 2.6:1 on the page */
/* semantic */
--es-primary: #706fd3; /* taken */
--es-primary-hover: #474787; /* taken */
--es-primary-active: #5554a0; /* derived */
--es-primary-on: #ffffff; /* 4.3:1 on the fill */
--es-success: #33d9b2; /* taken */
--es-success-hover: #218c74; /* taken */
--es-success-active: #27a587; /* derived */
--es-success-on: #1e1e39; /* 9.0:1 on the fill */
--es-info: #34ace0; /* taken */
--es-info-hover: #227093; /* taken */
--es-info-active: #2883aa; /* derived */
--es-info-on: #1e1e39; /* 6.2:1 on the fill */
--es-warning: #ffda79; /* taken */
--es-warning-hover: #ffb142; /* taken */
--es-warning-active: #c2a65c; /* derived */
--es-warning-on: #1e1e39; /* 12.0:1 on the fill */
--es-danger: #ff793f; /* taken */
--es-danger-hover: #cd6133; /* taken */
--es-danger-active: #c25c30; /* derived */
--es-danger-on: #1e1e39; /* 6.2:1 on the fill */
--es-accent: #ff5252; /* taken */
--es-accent-hover: #b33939; /* taken */
--es-accent-active: #c23e3e; /* derived */
--es-accent-on: #1e1e39; /* 5.1:1 on the fill */
/* categorical — never status */
--es-chart-1: #ff5252; /* Fluorescent Red */
--es-chart-2: #ff793f; /* Synthetic Pumpkin */
--es-chart-3: #ffb142; /* Mandarin Sorbet */
--es-chart-4: #f7f1e3; /* Swan White */
--es-chart-5: #ccae62; /* Desert */
--es-chart-6: #33d9b2; /* Celestial Green */
--es-chart-7: #218c74; /* Palm Springs Splash */
--es-chart-8: #706fd3; /* C64 Purple */
/* elevation — black, never the brand hue */
--es-elevation-1: 0 1px 3px rgb(0 0 0 / 0.12);/* raised */
--es-elevation-2: 0 4px 6px rgb(0 0 0 / 0.16);/* hover */
--es-elevation-3: 0 10px 20px rgb(0 0 0 / 0.20);/* overlay */
--es-elevation-4: 0 16px 32px rgb(0 0 0 / 0.24);/* modal */
}Professional tips
- Earthy — ochre, terracotta and stone with two deep purples. Warm neutrals are rare in this collection and this is where they are.
- Darkest value: Lucky Point #2c2c54. Lightest: Swan White #f7f1e3. Between them sits every ramp you could build from this set.
- Sort the sheet by Hue to find neighbours you can safely put side by side, and by Lightness to find the ones that can carry text. Source order is the designer’s order and tells you about their intent, not about contrast.
- If you only need one colour from this palette, take it and leave the rest. Adopting twenty because you liked one is how a product ends up with two palettes.
Common mistakes
- Using the palette at full saturation across a whole screen. These were drawn as accents against neutral ground; twenty of them at once is a swatch page, not an interface.
- Assuming the names mean something. They are memorable, not systematic — “Light Red” is darker than “Pastel Red” in the palette next door.
- Copying the hexes into a design file and the CSS separately. They will drift, and the design file will win the argument for about six months.
Real-world recommendations
- Credit stays attached: this set was drawn by Miguel Camacho (@miguelcm on Dribbble) and published in Flat UI Colors 2 by Ahmet Sülek.
- Palettes like this one age visibly. A 2013 flat palette reads as 2013 — which is useful when that is the intent and a liability when it is not.
- The fastest legitimate use is prototyping: grab a palette, get the categorical colours out of the way, and spend the argument you saved on hierarchy instead.
The measurement behind every derivation above. White and black bound what a colour can do, and reading a row in both directions gives you both answers at once — 4.86:1 on white is equally “this as text on a white page” and “white as a label on this fill”. The last column is what people mean when they ask whether a colour is accessible, and it is almost never both.
| Colour | On white | On black | Ink on |
|---|---|---|---|
| Lucky Point#2c2c54 | Aa13.16AAA | Aa1.60Fail | Light only |
| Jacksons Purple#40407a | Aa9.41AAA | Aa2.23Fail | Light only |
| Liberty#474787 | Aa8.34AAA | Aa2.52Fail | Light only |
| Eye Of Newt#b33939 | Aa5.90AA | Aa3.56AA Large | Light only |
| Devil Blue#227093 | Aa5.52AA | Aa3.81AA Large | Light only |
| C64 Purple#706fd3 | Aa4.28AA Large | Aa4.90AA | Dark only |
| Palm Springs Splash#218c74 | Aa4.14AA Large | Aa5.07AA | Dark only |
| Chilean Fire#cd6133 | Aa3.92AA Large | Aa5.35AA | Dark only |
| Grey Porcelain#84817a | Aa3.89AA Large | Aa5.40AA | Dark only |
| Fluorescent Red#ff5252 | Aa3.19AA Large | Aa6.58AA | Dark only |
| Alameda Ochre#cc8e35 | Aa2.80Fail | Aa7.49AAA | Dark only |
| Synthetic Pumpkin#ff793f | Aa2.61Fail | Aa8.06AAA | Dark only |
| Summer Sky#34ace0 | Aa2.59Fail | Aa8.12AAA | Dark only |
| Hot Stone#aaa69d | Aa2.43Fail | Aa8.65AAA | Dark only |
| Desert#ccae62 | Aa2.14Fail | Aa9.80AAA | Dark only |
| Mandarin Sorbet#ffb142 | Aa1.81Fail | Aa11.62AAA | Dark only |
| Celestial Green#33d9b2 | Aa1.79Fail | Aa11.71AAA | Dark only |
| Crocodile Tooth#d1ccc0 | Aa1.60Fail | Aa13.11AAA | Dark only |
| Spiced Butternut#ffda79 | Aa1.35Fail | Aa15.56AAA | Dark only |
| Swan White#f7f1e3 | Aa1.13Fail | Aa18.65AAA | Dark only |