Nazwany kolor · #11BB11
Emerald Starling
Emerald Starling to #11BB11: rgb(17 187 17), hsl(120 83% 40%), oklch(0.688 0.229 142.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Emerald Starling color name →
#11BB11
oklch(0.688 0.229 142.6)
Konwersje koloru
- HEX
- #11bb11
- RGB
- rgb(17 187 17)
- HSL
- hsl(120 83% 40%)
- HWB
- hwb(120 7% 27%)
- OKLCH
- oklch(0.688 0.229 142.6)
- OKLab
- oklab(0.688 -0.182 0.139)
- CIE Lab
- lab(66.35 -61.67 62.23)
- LCH
- lch(66.35 87.62 134.7)
- CMYK
- cmyk(91% 0% 91% 27%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 42C33D
- 5ECA58
- 76D16F
- 8BD885
- 9FDF9A
- B3E6AE
- C6ECC3
- D9F3D7
- ECF9EB
Odcienie ciemniejsze
- 0DA20D
- 098A09
- 067306
- 045C04
- 024602
- 013201
- 001F00
- 000D00
- 000200
Tony
- 31B62D
- 42B03D
- 4FAA4A
- 59A554
- 629F5D
- 699965
- 70936D
- 768D74
- 7B877A
Harmonie kolorów
Komplementarna +180°
- 11BB11
Emerald Starling
- DA5CEB
≈ Clematis Magenta
Analogowa -30° +30°
- 11BB11
Emerald Starling
- 9DA300
≈ Fistfull of Green
- 00B592
≈ Aloha
Triada +120° +240°
- 11BB11
Emerald Starling
- 6297FF
≈ Blue Chaos
- FF595E
≈ Grapefruit
Komplementarna rozszczepiona +150° +210°
- 11BB11
Emerald Starling
- A080FF
≈ Forgotten Purple
- FC4AA8
≈ Barbie Pink
Tetrada +90° +180° +270°
- 11BB11
Emerald Starling
- 00A8E3
≈ Huelveño Horizon
- DA5CEB
≈ Clematis Magenta
- EB7500
≈ Mee-hua Sunset
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.57:1 · APCA Lc 50
Ag
AAANa czerni
WCAG 8.14:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.14:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--emerald-starling: #11bb11;
--emerald-starling-rgb: 17 187 17;
--emerald-starling-oklch: oklch(0.688 0.229 142.6);
}
.element {
color: var(--emerald-starling);
background-color: hsl(120 83% 40%);
border-color: oklch(0.688 0.229 142.6);
}Tailwind CSS v4
@theme {
--color-emerald-starling: #11bb11;
--color-emerald-starling-50: #cdffcd;
--color-emerald-starling-100: #b8fdb8;
--color-emerald-starling-200: #93ee95;
--color-emerald-starling-300: #60d567;
--color-emerald-starling-400: #2ebe2a;
--color-emerald-starling-500: #00a700;
--color-emerald-starling-600: #008e00;
--color-emerald-starling-700: #007200;
--color-emerald-starling-800: #005300;
--color-emerald-starling-900: #003a00;
--color-emerald-starling-950: #002400;
}SCSS
$emerald-starling: #11bb11;
$emerald-starling-rgb: 17, 187, 17;
$emerald-starling-light: mix(#fff, $emerald-starling, 20%);
$emerald-starling-dark: mix(#000, $emerald-starling, 20%);
.element {
color: $emerald-starling;
box-shadow: 0 0 0 2px rgba($emerald-starling, 0.35);
}