Named color · #33BB00
Sour Apple Rings
Sour Apple Rings is #33BB00: rgb(51 187 0), hsl(104 100% 37%), oklch(0.692 0.225 140.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Sour Apple Rings color name →
#33BB00
oklch(0.692 0.225 140.5)
Color conversions
- HEX
- #33bb00
- RGB
- rgb(51 187 0)
- HSL
- hsl(104 100% 37%)
- HWB
- hwb(104 0% 27%)
- OKLCH
- oklch(0.692 0.225 140.5)
- OKLab
- oklab(0.692 -0.174 0.143)
- CIE Lab
- lab(66.79 -58.06 64.88)
- LCH
- lch(66.79 87.06 131.8)
- CMYK
- cmyk(73% 0% 100% 27%)
Tints · Shades · Tones
Tints
- 51C339
- 68CA55
- 7DD16D
- 91D884
- A4DF99
- B7E6AE
- C9ECC2
- DBF3D6
- EDF9EB
Shades
- 2BA200
- 238A00
- 1C7300
- 145C00
- 0D4600
- 073200
- 031F00
- 010D00
- 000200
Tones
- 42B628
- 4EB03A
- 58AA48
- 60A553
- 679F5C
- 6D9965
- 72936C
- 778D73
- 7C867A
Color harmonies
Complementary +180°
- 33BB00
Sour Apple Rings
- D761F0
≈ Clematis Magenta
Analogous -30° +30°
- 33BB00
Sour Apple Rings
- A2A300
≈ Countryside
- 00B790
≈ Green Velour
Triadic +120° +240°
- 33BB00
Sour Apple Rings
- 5F9AFF
≈ Blue Chaos
- FF5C66
≈ Grenadine Pink
Split-complementary +150° +210°
- 33BB00
Sour Apple Rings
- 9E84FF
≈ Periwinkle
- FB4EAE
≈ Barbie Pink
Tetradic +90° +180° +270°
- 33BB00
Sour Apple Rings
- 00AAE1
≈ Blue Fire
- D761F0
≈ Clematis Magenta
- F17300
≈ Supernatural Saffron
Contrast & accessibility
Ag
FailOn white
WCAG 2.54:1 · APCA Lc 49
Ag
AAAOn black
WCAG 8.24:1 · APCA Lc 53
Best text color: #000000
WCAG 8.24:1 (AAA) · APCA Lc 53
Contrast pairs
Code snippets
CSS
:root {
--sour-apple-rings: #33bb00;
--sour-apple-rings-rgb: 51 187 0;
--sour-apple-rings-oklch: oklch(0.692 0.225 140.5);
}
.element {
color: var(--sour-apple-rings);
background-color: hsl(104 100% 37%);
border-color: oklch(0.692 0.225 140.5);
}Tailwind CSS v4
@theme {
--color-sour-apple-rings: #33bb00;
--color-sour-apple-rings-50: #d0ffcb;
--color-sour-apple-rings-100: #bcfcb6;
--color-sour-apple-rings-200: #99ed92;
--color-sour-apple-rings-300: #6ad363;
--color-sour-apple-rings-400: #40bc22;
--color-sour-apple-rings-500: #00a600;
--color-sour-apple-rings-600: #008c00;
--color-sour-apple-rings-700: #007000;
--color-sour-apple-rings-800: #045200;
--color-sour-apple-rings-900: #043900;
--color-sour-apple-rings-950: #002300;
}SCSS
$sour-apple-rings: #33bb00;
$sour-apple-rings-rgb: 51, 187, 0;
$sour-apple-rings-light: mix(#fff, $sour-apple-rings, 20%);
$sour-apple-rings-dark: mix(#000, $sour-apple-rings, 20%);
.element {
color: $sour-apple-rings;
box-shadow: 0 0 0 2px rgba($sour-apple-rings, 0.35);
}