Named color · #BDDFB2
Graceful Flower
Graceful Flower is #BDDFB2: rgb(189 223 178), hsl(105 41% 79%), oklch(0.867 0.071 138.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Graceful Flower color name →
#BDDFB2
oklch(0.867 0.071 138.1)
Color conversions
- HEX
- #bddfb2
- RGB
- rgb(189 223 178)
- HSL
- hsl(105 41% 79%)
- HWB
- hwb(105 70% 13%)
- OKLCH
- oklch(0.867 0.071 138.1)
- OKLab
- oklab(0.867 -0.053 0.047)
- CIE Lab
- lab(85.46 -17.77 18.27)
- LCH
- lch(85.46 25.48 134.2)
- CMYK
- cmyk(15% 0% 20% 13%)
Tints · Shades · Tones
Tints
- C4E2BA
- CAE5C1
- D1E9C9
- D7ECD1
- DEEFD8
- E5F2E0
- EBF6E8
- F2F9F0
- F8FCF7
Shades
- A4C29A
- 8CA583
- 748A6D
- 5D6F57
- 475643
- 333D2F
- 1F271D
- 0D120C
- 020201
Tones
- B7D5AD
- B1CBA8
- AAC2A3
- A4B89E
- 9EAE99
- 98A594
- 929C8F
- 8C928A
- 868985
Color harmonies
Complementary +180°
- BDDFB2
Graceful Flower
- E7C5F2
≈ Purple’s Baby Sister
Analogous -30° +30°
- BDDFB2
Graceful Flower
- D7D7A2
≈ Garden Glade
- A6E3CB
≈ Turquoise Tower
Triadic +120° +240°
- BDDFB2
Graceful Flower
- B9D5FF
≈ Ice Cold Stare
- FFC1C2
≈ Delhi Dance Pink
Split-complementary +150° +210°
- BDDFB2
Graceful Flower
- D0CDFF
≈ Lavender Blue
- F8C1DB
≈ Miami Pink
Tetradic +90° +180° +270°
- BDDFB2
Graceful Flower
- A2DDF8
≈ Columbia Blue
- E7C5F2
≈ Purple’s Baby Sister
- FBC6AB
≈ Antique Coral
Contrast & accessibility
Ag
FailOn white
WCAG 1.46:1 · APCA Lc 22
Ag
AAAOn black
WCAG 14.36:1 · APCA Lc 81
Best text color: #000000
WCAG 14.36:1 (AAA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--graceful-flower: #bddfb2;
--graceful-flower-rgb: 189 223 178;
--graceful-flower-oklch: oklch(0.867 0.071 138.1);
}
.element {
color: var(--graceful-flower);
background-color: hsl(105 41% 79%);
border-color: oklch(0.867 0.071 138.1);
}Tailwind CSS v4
@theme {
--color-graceful-flower: #bddfb2;
--color-graceful-flower-50: #ebfbe7;
--color-graceful-flower-100: #dceed8;
--color-graceful-flower-200: #c5dcc0;
--color-graceful-flower-300: #a5c19f;
--color-graceful-flower-400: #8aa980;
--color-graceful-flower-500: #6f9263;
--color-graceful-flower-600: #5e7b55;
--color-graceful-flower-700: #4b6343;
--color-graceful-flower-800: #37482f;
--color-graceful-flower-900: #263220;
--color-graceful-flower-950: #141e10;
}SCSS
$graceful-flower: #bddfb2;
$graceful-flower-rgb: 189, 223, 178;
$graceful-flower-light: mix(#fff, $graceful-flower, 20%);
$graceful-flower-dark: mix(#000, $graceful-flower, 20%);
.element {
color: $graceful-flower;
box-shadow: 0 0 0 2px rgba($graceful-flower, 0.35);
}