Bright Flax
Plant care reminders · Score 86 ·Excellent
The lead color is deep, so use it for surfaces and emphasis rather than fine text. In an app screen this reads best when the brand color is reserved for one primary action per view, so the hierarchy does not turn into a wall of color.
Bright Flax is a 10-role App palette: primary #8a8f2a on a #fbfbf9 canvas. Body text reaches 13.49:1 (WCAG AAA), leaving enough headroom for long reading sessions; the primary sits at 3.35:1 against the canvas, enough for large text and control borders, not for body copy.
10 color roles
Every color has a defined purpose. Use the buttons on the right to copy it in any format.
primary#8a8f2argb(138, 143, 42)hsl(63, 54.6%, 36.3%)primaryDark#575a18rgb(87, 90, 24)hsl(62.7, 57.9%, 22.4%)primaryLight#cccf8ergb(204, 207, 142)hsl(62.8, 40.4%, 68.4%)secondary#3f638frgb(63, 99, 143)hsl(213, 38.8%, 40.4%)accent#3e35e9rgb(62, 53, 233)hsl(243, 80.4%, 56.1%)success#26a159rgb(38, 161, 89)hsl(144.9, 61.8%, 39%)warning#e69d0argb(230, 157, 10)hsl(40.1, 91.7%, 47.1%)danger#dd2a1drgb(221, 42, 29)hsl(4.1, 76.8%, 49%)text#2c2d1frgb(44, 45, 31)hsl(64.3, 18.4%, 14.9%)bg#fbfbf9rgb(251, 251, 249)hsl(60, 20%, 98%)Editorial review · App
We go through the traps that bite most often on this platform. Every verdict is computed from the color values, not boilerplate.
Thin margin: this struggles on dense screens, so keep it to large or bold text.
No problem here, safe to use as is.
No problem here, safe to use as is.
No problem here, safe to use as is.
How to use it
Written by hand for the hue family and lightness of this palette, not assembled from a template.
This palette's lead color is deep and carries weight, which suits dark themes and interfaces that need to feel professional and steady.
What it looks like in a real interface
The same palette rendered across all three platforms, the fastest way to judge whether it works.
Sample body copy, used to check how secondary text reads on a card background.
Read more →Accessibility contrast check
Calculated to WCAG 2.1. AA is the accessibility baseline, AAA the enhanced level.
| Foreground / background | Ratio | Body text | Large text |
|---|---|---|---|
| Body text / page background | 13.49:1 | AAA | AAA |
| Brand color / page background | 3.35:1 | AA | AA |
Verify this pair in the checker →Compare with other palettes →Site-wide accessibility report →
More palettes on this platform
Ranked by color family and shared tags, so the next one is worth opening.
Export to your project
Four formats, ready to paste. Or fetch them by URL from your tooling or AI agent.
CSS variables
:root {
--color-primary: #8a8f2a; /* Primary */
--color-primaryDark: #575a18; /* Primary dark */
--color-primaryLight: #cccf8e; /* Primary light */
--color-secondary: #3f638f; /* Secondary */
--color-accent: #3e35e9; /* Accent */
--color-success: #26a159; /* Success */
--color-warning: #e69d0a; /* Warning */
--color-danger: #dd2a1d; /* Danger */
--color-text: #2c2d1f; /* Text */
--color-bg: #fbfbf9; /* Page background */
}SCSS variables
$color-primary: #8a8f2a; // Primary
$color-primaryDark: #575a18; // Primary dark
$color-primaryLight: #cccf8e; // Primary light
$color-secondary: #3f638f; // Secondary
$color-accent: #3e35e9; // Accent
$color-success: #26a159; // Success
$color-warning: #e69d0a; // Warning
$color-danger: #dd2a1d; // Danger
$color-text: #2c2d1f; // Text
$color-bg: #fbfbf9; // Page backgroundTailwind config
// tailwind.config.js: Bright Flax
module.exports = {
theme: {
extend: {
colors: {
'primary': '#8a8f2a',
'primaryDark': '#575a18',
'primaryLight': '#cccf8e',
'secondary': '#3f638f',
'accent': '#3e35e9',
'success': '#26a159',
'warning': '#e69d0a',
'danger': '#dd2a1d',
'text': '#2c2d1f',
'bg': '#fbfbf9',
},
},
},
};Machine-readable JSON
{
"name": "Bright Flax",
"platform": "app",
"tags": [
"Low saturation",
"Yellow"
],
"advice": {
"family": "Yellow",
"depth": "This palette's lead color is deep and carries weight, which suits dark themes and interfaces that need to feel professional and steady.",
"muted": null,
"suit": "High in lightness and very approachable, so it works as a support color for children's, creative and retail products.",
"avoid": "Too much of it looks garish and cheap, especially the greenish yellows.",
"pair": "Steadiest with charcoal and navy; on dark themes it can take the lead instead."
},
"roles": {
"primary": "#8a8f2a",
"primaryDark": "#575a18",
"primaryLight": "#cccf8e",
"secondary": "#3f638f",
"accent": "#3e35e9",
"success": "#26a159",
"warning": "#e69d0a",
"danger": "#dd2a1d",
"text": "#2c2d1f",
"bg": "#fbfbf9"
},
"contrast": {
"textOnBg": {
"ratio": 13.49,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.35,
"level": "AA"
}
}
}