Nazwany kolor · #A4DDD3
Sparkling Mint
Sparkling Mint to #A4DDD3: rgb(164 221 211), hsl(169 46% 75%), oklch(0.856 0.06 182.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Sparkling Mint color name →
#A4DDD3
oklch(0.856 0.06 182.9)
Konwersje koloru
- HEX
- #a4ddd3
- RGB
- rgb(164 221 211)
- HSL
- hsl(169 46% 75%)
- HWB
- hwb(169 64% 13%)
- OKLCH
- oklch(0.856 0.06 182.9)
- OKLab
- oklab(0.856 -0.06 -0.003)
- CIE Lab
- lab(83.99 -20.5 -1.31)
- LCH
- lch(83.99 20.54 183.6)
- CMYK
- cmyk(26% 0% 5% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- ADE0D7
- B7E4DC
- C0E7E0
- C9EBE4
- D2EEE9
- DBF2ED
- E4F5F2
- EDF8F6
- F6FCFB
Odcienie ciemniejsze
- 8EC0B7
- 79A49C
- 648882
- 506E69
- 3D5551
- 2B3D3A
- 1A2624
- 0A1110
- 010202
Tony
- A1D3CA
- 9ECAC2
- 9AC0B9
- 97B7B1
- 93AEA9
- 8FA4A0
- 8C9B98
- 889290
- 848988
Harmonie kolorów
Komplementarna +180°
- A4DDD3
Sparkling Mint
- F3C0CC
≈ Azalea Flower
Analogowa -30° +30°
- A4DDD3
Sparkling Mint
- B3DCBD
≈ Ice Mist
- A2DBE7
≈ Havana Blue
Triada +120° +240°
- A4DDD3
Sparkling Mint
- D7C7F1
≈ Soap
- EDC8A8
≈ Caramel Ice
Komplementarna rozszczepiona +150° +210°
- A4DDD3
Sparkling Mint
- E8C2E1
≈ Sweet Alyssum
- F4C2B7
≈ Rustique
Tetrada +90° +180° +270°
- A4DDD3
Sparkling Mint
- C2CEF8
≈ Frost Fairy
- F3C0CC
≈ Azalea Flower
- DDCFA3
≈ Summer Solstice
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.51:1 · APCA Lc 24
Ag
AAANa czerni
WCAG 13.86:1 · APCA Lc 79
Najlepszy kolor tekstu: #000000
WCAG 13.86:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--sparkling-mint: #a4ddd3;
--sparkling-mint-rgb: 164 221 211;
--sparkling-mint-oklch: oklch(0.856 0.06 182.9);
}
.element {
color: var(--sparkling-mint);
background-color: hsl(169 46% 75%);
border-color: oklch(0.856 0.06 182.9);
}Tailwind CSS v4
@theme {
--color-sparkling-mint: #a4ddd3;
--color-sparkling-mint-50: #e3fbf7;
--color-sparkling-mint-100: #d3efea;
--color-sparkling-mint-200: #b9ddd7;
--color-sparkling-mint-300: #95c2bb;
--color-sparkling-mint-400: #76aaa2;
--color-sparkling-mint-500: #56938a;
--color-sparkling-mint-600: #497d74;
--color-sparkling-mint-700: #3a645d;
--color-sparkling-mint-800: #2a4943;
--color-sparkling-mint-900: #1c332f;
--color-sparkling-mint-950: #0c1f1b;
}SCSS
$sparkling-mint: #a4ddd3;
$sparkling-mint-rgb: 164, 221, 211;
$sparkling-mint-light: mix(#fff, $sparkling-mint, 20%);
$sparkling-mint-dark: mix(#000, $sparkling-mint, 20%);
.element {
color: $sparkling-mint;
box-shadow: 0 0 0 2px rgba($sparkling-mint, 0.35);
}