Northern Lake
Pet care & community · Score 100 ·Excellent
Sitting mid-range in lightness, the lead color adapts to both light and dark themes with little adjustment. 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.
10 color roles
Every color has a defined purpose. Use the buttons on the right to copy it in any format.
primary#4a27cbrgb(74, 39, 203)hsl(252.8, 67.8%, 47.5%)primaryDark#331992rgb(51, 25, 146)hsl(252.9, 70.8%, 33.5%)primaryLight#bbaee7rgb(187, 174, 231)hsl(253.7, 54.3%, 79.4%)secondary#c04769rgb(192, 71, 105)hsl(343.1, 49%, 51.6%)accent#f6bc28rgb(246, 188, 40)hsl(43.1, 92%, 56.1%)success#24b25frgb(36, 178, 95)hsl(144.9, 66.4%, 42%)warning#f5a70argb(245, 167, 10)hsl(40.1, 92.2%, 50%)danger#e92e20rgb(233, 46, 32)hsl(4.2, 82%, 52%)text#221f2drgb(34, 31, 45)hsl(252.9, 18.4%, 14.9%)bg#f9f9fbrgb(249, 249, 251)hsl(240, 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.
No problem here, safe to use as is.
No problem here, safe to use as is.
No problem here, safe to use as is.
This color is bright against the background and dark text cannot hold it down; lower the lightness or use it as a large fill only.
How to use it
Written by hand for the hue family and lightness of this palette, not assembled from a template.
The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.
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 | 15.34:1 | AAA | AAA |
| Brand color / page background | 8.17:1 | AAA | AAA |
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: #4a27cb; /* Primary */
--color-primaryDark: #331992; /* Primary dark */
--color-primaryLight: #bbaee7; /* Primary light */
--color-secondary: #c04769; /* Secondary */
--color-accent: #f6bc28; /* Accent */
--color-success: #24b25f; /* Success */
--color-warning: #f5a70a; /* Warning */
--color-danger: #e92e20; /* Danger */
--color-text: #221f2d; /* Text */
--color-bg: #f9f9fb; /* Page background */
}SCSS variables
$color-primary: #4a27cb; // Primary
$color-primaryDark: #331992; // Primary dark
$color-primaryLight: #bbaee7; // Primary light
$color-secondary: #c04769; // Secondary
$color-accent: #f6bc28; // Accent
$color-success: #24b25f; // Success
$color-warning: #f5a70a; // Warning
$color-danger: #e92e20; // Danger
$color-text: #221f2d; // Text
$color-bg: #f9f9fb; // Page backgroundTailwind config
// tailwind.config.js: Northern Lake
module.exports = {
theme: {
extend: {
colors: {
'primary': '#4a27cb',
'primaryDark': '#331992',
'primaryLight': '#bbaee7',
'secondary': '#c04769',
'accent': '#f6bc28',
'success': '#24b25f',
'warning': '#f5a70a',
'danger': '#e92e20',
'text': '#221f2d',
'bg': '#f9f9fb',
},
},
},
};Machine-readable JSON
{
"name": "Northern Lake",
"platform": "app",
"tags": [
"Retro",
"Blue"
],
"advice": {
"family": "Blue",
"depth": "The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.",
"muted": null,
"suit": "Comfortable for interfaces people look at for long stretches: it is the easiest color on the eye.",
"avoid": "It is so common that it can feel anonymous; support colors and typography have to do the differentiating.",
"pair": "Deeper blue for depth and white for openness are the two hardest combinations to get wrong."
},
"roles": {
"primary": "#4a27cb",
"primaryDark": "#331992",
"primaryLight": "#bbaee7",
"secondary": "#c04769",
"accent": "#f6bc28",
"success": "#24b25f",
"warning": "#f5a70a",
"danger": "#e92e20",
"text": "#221f2d",
"bg": "#f9f9fb"
},
"contrast": {
"textOnBg": {
"ratio": 15.34,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 8.17,
"level": "AAA"
}
}
}