Nazwany kolor · #1F6C53
Sparkling Emerald
Sparkling Emerald to #1F6C53: rgb(31 108 83), hsl(161 55% 27%), oklch(0.478 0.085 167.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Sparkling Emerald color name →
#1F6C53
oklch(0.478 0.085 167.2)
Konwersje koloru
- HEX
- #1f6c53
- RGB
- rgb(31 108 83)
- HSL
- hsl(161 55% 27%)
- HWB
- hwb(161 12% 58%)
- OKLCH
- oklch(0.478 0.085 167.2)
- OKLab
- oklab(0.478 -0.083 0.019)
- CIE Lab
- lab(40.54 -29.23 6.95)
- LCH
- lch(40.54 30.05 166.6)
- CMYK
- cmyk(71% 0% 23% 58%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 3A7A63
- 518873
- 679683
- 7CA594
- 92B3A5
- A7C2B6
- BDD1C8
- D3E0DA
- E9F0EC
Odcienie ciemniejsze
- 195D47
- 144E3B
- 0F4030
- 0A3225
- 06251B
- 031911
- 010D08
- 000402
- 000000
Tony
- 2E6E57
- 39705C
- 447260
- 4D7565
- 577769
- 5F796E
- 687A72
- 707C77
- 787E7B
Harmonie kolorów
Komplementarna +180°
- 1F6C53
Sparkling Emerald
- 7F4866
≈ Vivacious Violet
Analogowa -30° +30°
- 1F6C53
Sparkling Emerald
- 456837
≈ Dell
- 006B6D
≈ Mayan Blue
Triada +120° +240°
- 1F6C53
Sparkling Emerald
- 5A558A
≈ Mountain Iris
- 844D31
≈ Pookie Bear
Komplementarna rozszczepiona +150° +210°
- 1F6C53
Sparkling Emerald
- 704D7C
≈ Cabbage Blossom Violet
- 86484B
≈ Bolero
Tetrada +90° +180° +270°
- 1F6C53
Sparkling Emerald
- 3D5E8C
≈ Delft
- 7F4866
≈ Vivacious Violet
- 77561D
≈ Lizard Brown
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.30:1 · APCA Lc 81
Ag
FailNa czerni
WCAG 3.32:1 · APCA Lc 21
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.30:1 (AA) · APCA Lc 81
Contrast pairs
Fragmenty kodu
CSS
:root {
--sparkling-emerald: #1f6c53;
--sparkling-emerald-rgb: 31 108 83;
--sparkling-emerald-oklch: oklch(0.478 0.085 167.2);
}
.element {
color: var(--sparkling-emerald);
background-color: hsl(161 55% 27%);
border-color: oklch(0.478 0.085 167.2);
}Tailwind CSS v4
@theme {
--color-sparkling-emerald: #1f6c53;
--color-sparkling-emerald-50: #dffef1;
--color-sparkling-emerald-100: #cdf2e3;
--color-sparkling-emerald-200: #b1e1ce;
--color-sparkling-emerald-300: #8cc6b0;
--color-sparkling-emerald-400: #6aaf94;
--color-sparkling-emerald-500: #46987b;
--color-sparkling-emerald-600: #3c8168;
--color-sparkling-emerald-700: #306753;
--color-sparkling-emerald-800: #224c3b;
--color-sparkling-emerald-900: #173529;
--color-sparkling-emerald-950: #072016;
}SCSS
$sparkling-emerald: #1f6c53;
$sparkling-emerald-rgb: 31, 108, 83;
$sparkling-emerald-light: mix(#fff, $sparkling-emerald, 20%);
$sparkling-emerald-dark: mix(#000, $sparkling-emerald, 20%);
.element {
color: $sparkling-emerald;
box-shadow: 0 0 0 2px rgba($sparkling-emerald, 0.35);
}