Benoemde kleur · #CCE2CA
Jocular Green
Jocular Green is #CCE2CA: rgb(204 226 202), hsl(115 29% 84%), oklch(0.89 0.04 142.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Green mean? → · Jocular Green color name →
#CCE2CA
oklch(0.89 0.04 142.9)
Kleurconversies
- HEX
- #cce2ca
- RGB
- rgb(204 226 202)
- HSL
- hsl(115 29% 84%)
- HWB
- hwb(115 79% 11%)
- OKLCH
- oklch(0.89 0.04 142.9)
- OKLab
- oklab(0.89 -0.032 0.024)
- CIE Lab
- lab(87.74 -10.87 9.17)
- LCH
- lch(87.74 14.22 139.8)
- CMYK
- cmyk(10% 0% 11% 11%)
Tinten · Schaduwen · Tonen
Tinten
- D1E5CF
- D6E8D4
- DBEBDA
- E0EEDF
- E5F1E4
- EAF3EA
- F0F6EF
- F5F9F4
- FAFCFA
Schaduwen
- B1C4AF
- 97A895
- 7E8C7C
- 657164
- 4E574D
- 373E37
- 222722
- 0F120F
- 020302
Tonen
- C4D8C2
- BCCEBB
- B5C4B3
- ADBAAC
- A5B0A4
- 9EA69D
- 969C96
- 8F938E
- 878987
Kleurharmonieën
Complementair +180°
- CCE2CA
Jocular Green
- E8D2EA
≈ Lavender Princess
Analoog -30° +30°
- CCE2CA
Jocular Green
- DADEC0
≈ Soft Vellum
- C1E4D8
≈ Jade Spell
Triadisch +120° +240°
- CCE2CA
Jocular Green
- CDDBF6
≈ Fly a Kite
- F4D1CE
≈ Pinky Promise
Gesplitst complementair +150° +210°
- CCE2CA
Jocular Green
- DBD6F4
≈ Japan Blush
- F1D0DD
≈ Ballerina
Tetradisch +90° +180° +270°
- CCE2CA
Jocular Green
- C2E0F1
≈ Tropical Pool
- E8D2EA
≈ Lavender Princess
- F1D4C3
≈ Melon Pink
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.37:1 · APCA Lc 18
Ag
AAAOp zwart
WCAG 15.29:1 · APCA Lc 85
Beste tekstkleur: #000000
WCAG 15.29:1 (AAA) · APCA Lc 85
Contrast pairs
Codefragmenten
CSS
:root {
--jocular-green: #cce2ca;
--jocular-green-rgb: 204 226 202;
--jocular-green-oklch: oklch(0.89 0.04 142.9);
}
.element {
color: var(--jocular-green);
background-color: hsl(115 29% 84%);
border-color: oklch(0.89 0.04 142.9);
}Tailwind CSS v4
@theme {
--color-jocular-green: #cce2ca;
--color-jocular-green-50: #eef8ee;
--color-jocular-green-100: #e0ece0;
--color-jocular-green-200: #cad9ca;
--color-jocular-green-300: #abbdab;
--color-jocular-green-400: #91a58f;
--color-jocular-green-500: #778d75;
--color-jocular-green-600: #657863;
--color-jocular-green-700: #51604f;
--color-jocular-green-800: #3b4639;
--color-jocular-green-900: #283027;
--color-jocular-green-950: #161d15;
}SCSS
$jocular-green: #cce2ca;
$jocular-green-rgb: 204, 226, 202;
$jocular-green-light: mix(#fff, $jocular-green, 20%);
$jocular-green-dark: mix(#000, $jocular-green, 20%);
.element {
color: $jocular-green;
box-shadow: 0 0 0 2px rgba($jocular-green, 0.35);
}