Named color · #7BD9AD
Fresco Green
Fresco Green is #7BD9AD: rgb(123 217 173), hsl(152 55% 67%), oklch(0.815 0.111 162.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Fresco Green color name →
#7BD9AD
oklch(0.815 0.111 162.3)
Color conversions
- HEX
- #7bd9ad
- RGB
- rgb(123 217 173)
- HSL
- hsl(152 55% 67%)
- HWB
- hwb(152 48% 15%)
- OKLCH
- oklch(0.815 0.111 162.3)
- OKLab
- oklab(0.815 -0.105 0.034)
- CIE Lab
- lab(80 -36.78 12.64)
- LCH
- lch(80 38.89 161)
- CMYK
- cmyk(43% 0% 20% 15%)
Tints · Shades · Tones
Tints
- 8ADDB5
- 98E1BD
- A6E5C5
- B4E9CD
- C1EDD6
- CDF0DE
- DAF4E6
- E6F8EE
- F3FBF7
Shades
- 6ABC96
- 5AA17F
- 4A866A
- 3A6C55
- 2C5341
- 1E3B2D
- 10251B
- 05110B
- 010201
Tones
- 7DD0A8
- 7FC7A4
- 80BE9F
- 81B59B
- 82AC96
- 82A392
- 829A8D
- 829189
- 818984
Color harmonies
Complementary +180°
- 7BD9AD
Fresco Green
- F4A6D6
≈ Pretty Pink Piggy
Analogous -30° +30°
- 7BD9AD
Fresco Green
- A7D286
≈ Gossip
- 5CD9D5
≈ Hammam Blue
Triadic +120° +240°
- 7BD9AD
Fresco Green
- B9BBFF
≈ Dried Lilac
- FFAB89
≈ Super Sepia
Split-complementary +150° +210°
- 7BD9AD
Fresco Green
- DBAEF6
≈ Petal Plush
- FFA6B0
≈ Strawberry Frappé
Tetradic +90° +180° +270°
- 7BD9AD
Fresco Green
- 95C7FF
≈ Apocyan
- F4A6D6
≈ Pretty Pink Piggy
- EFB76F
≈ Olden Amber
Contrast & accessibility
Ag
FailOn white
WCAG 1.69:1 · APCA Lc 30
Ag
AAAOn black
WCAG 12.37:1 · APCA Lc 73
Best text color: #000000
WCAG 12.37:1 (AAA) · APCA Lc 73
Contrast pairs
Code snippets
CSS
:root {
--fresco-green: #7bd9ad;
--fresco-green-rgb: 123 217 173;
--fresco-green-oklch: oklch(0.815 0.111 162.3);
}
.element {
color: var(--fresco-green);
background-color: hsl(152 55% 67%);
border-color: oklch(0.815 0.111 162.3);
}Tailwind CSS v4
@theme {
--color-fresco-green: #7bd9ad;
--color-fresco-green-50: #d9ffed;
--color-fresco-green-100: #c7f4de;
--color-fresco-green-200: #a8e4c8;
--color-fresco-green-300: #80caa9;
--color-fresco-green-400: #5ab38b;
--color-fresco-green-500: #2a9c70;
--color-fresco-green-600: #27845f;
--color-fresco-green-700: #1f6a4c;
--color-fresco-green-800: #174e35;
--color-fresco-green-900: #0f3624;
--color-fresco-green-950: #022113;
}SCSS
$fresco-green: #7bd9ad;
$fresco-green-rgb: 123, 217, 173;
$fresco-green-light: mix(#fff, $fresco-green, 20%);
$fresco-green-dark: mix(#000, $fresco-green, 20%);
.element {
color: $fresco-green;
box-shadow: 0 0 0 2px rgba($fresco-green, 0.35);
}