Nazwany kolor · #C6D6C4
Apothecary Jar
Apothecary Jar to #C6D6C4: rgb(198 214 196), hsl(113 18% 80%), oklch(0.859 0.03 142.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Apothecary Jar color name →
#C6D6C4
oklch(0.859 0.03 142.2)
Konwersje koloru
- HEX
- #c6d6c4
- RGB
- rgb(198 214 196)
- HSL
- hsl(113 18% 80%)
- HWB
- hwb(113 77% 16%)
- OKLCH
- oklch(0.859 0.03 142.2)
- OKLab
- oklab(0.859 -0.024 0.018)
- CIE Lab
- lab(84.03 -8.07 6.98)
- LCH
- lch(84.03 10.67 139.1)
- CMYK
- cmyk(7% 0% 8% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CCDACA
- D1DED0
- D7E2D5
- DDE6DB
- E2EAE1
- E8EEE7
- EEF3ED
- F3F7F3
- F9FBF9
Odcienie ciemniejsze
- ACBAAA
- 929E91
- 7A8478
- 626A61
- 4B524A
- 353B35
- 212521
- 0E100E
- 020202
Tony
- BFCDBD
- B8C4B6
- B0BBAF
- A9B3A8
- A2AAA1
- 9BA19B
- 949994
- 8E918D
- 878887
Harmonie kolorów
Komplementarna +180°
- C6D6C4
Apothecary Jar
- DACBDD
≈ Violet Mist
Analogowa -30° +30°
- C6D6C4
Apothecary Jar
- D1D3BD
≈ Soft Kind
- BED7CE
≈ Meadow Lane
Triada +120° +240°
- C6D6C4
Apothecary Jar
- C6D1E5
≈ Love Crystal
- E4C9C8
≈ Youth
Komplementarna rozszczepiona +150° +210°
- C6D6C4
Apothecary Jar
- D1CEE3
≈ Potentially Purple
- E1C9D3
≈ Sweet and Sassy
Tetrada +90° +180° +270°
- C6D6C4
Apothecary Jar
- BED5E1
≈ Pale Aqua
- DACBDD
≈ Violet Mist
- E1CCBF
≈ Belle of the Ball
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.51:1 · APCA Lc 24
Ag
AAANa czerni
WCAG 13.81:1 · APCA Lc 79
Najlepszy kolor tekstu: #000000
WCAG 13.81:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--apothecary-jar: #c6d6c4;
--apothecary-jar-rgb: 198 214 196;
--apothecary-jar-oklch: oklch(0.859 0.03 142.2);
}
.element {
color: var(--apothecary-jar);
background-color: hsl(113 18% 80%);
border-color: oklch(0.859 0.03 142.2);
}Tailwind CSS v4
@theme {
--color-apothecary-jar: #c6d6c4;
--color-apothecary-jar-50: #f0f7f0;
--color-apothecary-jar-100: #e2ebe2;
--color-apothecary-jar-200: #cdd8cc;
--color-apothecary-jar-300: #afbcae;
--color-apothecary-jar-400: #95a393;
--color-apothecary-jar-500: #7b8c79;
--color-apothecary-jar-600: #687667;
--color-apothecary-jar-700: #535e52;
--color-apothecary-jar-800: #3d453b;
--color-apothecary-jar-900: #2a3029;
--color-apothecary-jar-950: #181c17;
}SCSS
$apothecary-jar: #c6d6c4;
$apothecary-jar-rgb: 198, 214, 196;
$apothecary-jar-light: mix(#fff, $apothecary-jar, 20%);
$apothecary-jar-dark: mix(#000, $apothecary-jar, 20%);
.element {
color: $apothecary-jar;
box-shadow: 0 0 0 2px rgba($apothecary-jar, 0.35);
}