Palette · 10 colors · Lc 9.9
Flood Garden palette
Flood Garden: a 10-color palette (Pink, 10 Colors). HEX, RGB, HSL and OKLCH for #F3F3FF, #A5ADE8, #6870D0, #007A9C, #32822D, #844600, #582D48, #282645, #101326, #0C0D12, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- 10 Colors
bg
#F3F3FF
surface
#A5ADE8
muted
#6870D0
primary
#007A9C
secondary
#32822D
accent
#844600
highlight
#582D48
border
#282645
focus
#101326
text
#0C0D12
Colors in Flood Garden: HEX, RGB, HSL & OKLCH
- #F3F3FF color page →
bg
#F3F3FF
- RGB
- rgb(243 243 255)
- HSL
- hsl(240 100% 98%)
- OKLCH
- oklch(0.968 0.016 286.1)
WCAG contrast: on white 1.10:1 (Fail) · on black 19.07:1 (AAA)
- #A5ADE8 color page →
surface
#A5ADE8
- RGB
- rgb(165 173 232)
- HSL
- hsl(233 59% 78%)
- OKLCH
- oklch(0.763 0.085 278.2)
WCAG contrast: on white 2.15:1 (Fail) · on black 9.74:1 (AAA)
- #6870D0 color page →
muted
#6870D0
- RGB
- rgb(104 112 208)
- HSL
- hsl(235 53% 61%)
- OKLCH
- oklch(0.585 0.145 277.3)
WCAG contrast: on white 4.35:1 (Fail) · on black 4.81:1 (AA)
- #007A9C color page →
primary
#007A9C
- RGB
- rgb(0 122 156)
- HSL
- hsl(193 100% 31%)
- OKLCH
- oklch(0.54 0.103 225.9)
WCAG contrast: on white 4.92:1 (AA) · on black 4.26:1 (Fail)
- #32822D color page →
secondary
#32822D
- RGB
- rgb(50 130 45)
- HSL
- hsl(116 49% 34%)
- OKLCH
- oklch(0.538 0.144 142.3)
WCAG contrast: on white 4.80:1 (AA) · on black 4.36:1 (Fail)
- #844600 color page →
accent
#844600
- RGB
- rgb(132 70 0)
- HSL
- hsl(32 100% 26%)
- OKLCH
- oklch(0.461 0.11 58.6)
WCAG contrast: on white 7.34:1 (AAA) · on black 2.85:1 (Fail)
- #582D48 color page →
highlight
#582D48
- RGB
- rgb(88 45 72)
- HSL
- hsl(322 32% 26%)
- OKLCH
- oklch(0.363 0.073 343)
WCAG contrast: on white 11.14:1 (AAA) · on black 1.88:1 (Fail)
- #282645 color page →
border
#282645
- RGB
- rgb(40 38 69)
- HSL
- hsl(244 29% 21%)
- OKLCH
- oklch(0.287 0.056 285.2)
WCAG contrast: on white 14.44:1 (AAA) · on black 1.45:1 (Fail)
- #101326 color page →
focus
#101326
- RGB
- rgb(16 19 38)
- HSL
- hsl(232 41% 11%)
- OKLCH
- oklch(0.195 0.039 275.4)
WCAG contrast: on white 18.36:1 (AAA) · on black 1.14:1 (Fail)
- #0C0D12 color page →
text
#0C0D12
- RGB
- rgb(12 13 18)
- HSL
- hsl(230 20% 6%)
- OKLCH
- oklch(0.16 0.011 276.2)
WCAG contrast: on white 19.40:1 (AAA) · on black 1.08:1 (Fail)
Export Flood Garden: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f3f3ff;
--surface: #a5ade8;
--muted: #6870d0;
--primary: #007a9c;
--secondary: #32822d;
--accent: #844600;
--highlight: #582d48;
--border: #282645;
--focus: #101326;
--text: #0c0d12;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f3f3ff;
--color-surface: #a5ade8;
--color-muted: #6870d0;
--color-primary: #007a9c;
--color-secondary: #32822d;
--color-accent: #844600;
--color-highlight: #582d48;
--color-border: #282645;
--color-focus: #101326;
--color-text: #0c0d12;
}JSON (DTCG tokens)
{
"flood-garden-3x5": {
"bg": {
"$type": "color",
"$value": "#f3f3ff"
},
"surface": {
"$type": "color",
"$value": "#a5ade8"
},
"muted": {
"$type": "color",
"$value": "#6870d0"
},
"primary": {
"$type": "color",
"$value": "#007a9c"
},
"secondary": {
"$type": "color",
"$value": "#32822d"
},
"accent": {
"$type": "color",
"$value": "#844600"
},
"highlight": {
"$type": "color",
"$value": "#582d48"
},
"border": {
"$type": "color",
"$value": "#282645"
},
"focus": {
"$type": "color",
"$value": "#101326"
},
"text": {
"$type": "color",
"$value": "#0c0d12"
}
}
}About this palette
Flood Garden is a 10-color OKLCH-ready palette tagged pink, 10 colors. Hex values: #F3F3FF, #A5ADE8, #6870D0, #007A9C, #32822D, #844600, #582D48, #282645, #101326, #0C0D12. APCA contrast score Lc 9.9. Open it in Colorise Pro Studio to lock roles and regenerate harmonies.
Related palettes
Shared tags, similar size and contrast.
Palettes with similar colors
Closest to Flood Garden by OKLab color distance.