Nazwany kolor · #AF9A91
Quarry Quartz
Quarry Quartz to #AF9A91: rgb(175 154 145), hsl(18 16% 63%), oklch(0.702 0.028 44.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Quarry Quartz color name →
#AF9A91
oklch(0.702 0.028 44.6)
Konwersje koloru
- HEX
- #af9a91
- RGB
- rgb(175 154 145)
- HSL
- hsl(18 16% 63%)
- HWB
- hwb(18 57% 31%)
- OKLCH
- oklch(0.702 0.028 44.6)
- OKLab
- oklab(0.702 0.02 0.02)
- CIE Lab
- lab(65.29 6.9 7.73)
- LCH
- lch(65.29 10.36 48.3)
- CMYK
- cmyk(0% 12% 17% 31%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B7A49C
- BFADA6
- C7B7B1
- CFC1BC
- D7CBC7
- DFD6D2
- E7E0DD
- EFEAE8
- F7F5F4
Odcienie ciemniejsze
- 98857D
- 81716A
- 6B5E58
- 564B46
- 413935
- 2E2725
- 1C1715
- 0B0907
- 010101
Tony
- AA978F
- A6958E
- A1928C
- 9C908A
- 978D89
- 938A87
- 8E8885
- 898583
- 858382
Harmonie kolorów
Komplementarna +180°
- AF9A91
Quarry Quartz
- 8DA3AC
≈ Galleria Blue
Analogowa -30° +30°
- AF9A91
Quarry Quartz
- B09899
≈ Heirloom Orchid
- AA9D8C
≈ Delicate Truffle
Triada +120° +240°
- AF9A91
Quarry Quartz
- 90A59B
≈ Spruce Shade
- 9D9DB1
≈ Purple Balance
Komplementarna rozszczepiona +150° +210°
- AF9A91
Quarry Quartz
- 8CA5A4
≈ October Sky
- 94A0B1
≈ Robotic Gods
Tetrada +90° +180° +270°
- AF9A91
Quarry Quartz
- 98A392
≈ Big Fish
- 8DA3AC
≈ Galleria Blue
- A69AAC
≈ Seeress
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.67:1 · APCA Lc 52
Ag
AAANa czerni
WCAG 7.85:1 · APCA Lc 50
Najlepszy kolor tekstu: #000000
WCAG 7.85:1 (AAA) · APCA Lc 50
Contrast pairs
Fragmenty kodu
CSS
:root {
--quarry-quartz: #af9a91;
--quarry-quartz-rgb: 175 154 145;
--quarry-quartz-oklch: oklch(0.702 0.028 44.6);
}
.element {
color: var(--quarry-quartz);
background-color: hsl(18 16% 63%);
border-color: oklch(0.702 0.028 44.6);
}Tailwind CSS v4
@theme {
--color-quarry-quartz: #af9a91;
--color-quarry-quartz-50: #fcf3ee;
--color-quarry-quartz-100: #f0e5e0;
--color-quarry-quartz-200: #dfd1ca;
--color-quarry-quartz-300: #c4b3ab;
--color-quarry-quartz-400: #ae9a91;
--color-quarry-quartz-500: #978177;
--color-quarry-quartz-600: #806d65;
--color-quarry-quartz-700: #665751;
--color-quarry-quartz-800: #4b3f3b;
--color-quarry-quartz-900: #342c28;
--color-quarry-quartz-950: #201916;
}SCSS
$quarry-quartz: #af9a91;
$quarry-quartz-rgb: 175, 154, 145;
$quarry-quartz-light: mix(#fff, $quarry-quartz, 20%);
$quarry-quartz-dark: mix(#000, $quarry-quartz, 20%);
.element {
color: $quarry-quartz;
box-shadow: 0 0 0 2px rgba($quarry-quartz, 0.35);
}