Nazwany kolor · #A9A797
Amazing Boulder
Amazing Boulder to #A9A797: rgb(169 167 151), hsl(53 9% 63%), oklch(0.725 0.023 101.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Amazing Boulder color name →
#A9A797
oklch(0.725 0.023 101.1)
Konwersje koloru
- HEX
- #a9a797
- RGB
- rgb(169 167 151)
- HSL
- hsl(53 9% 63%)
- HWB
- hwb(53 59% 34%)
- OKLCH
- oklch(0.725 0.023 101.1)
- OKLab
- oklab(0.725 -0.004 0.022)
- CIE Lab
- lab(68.32 -1.39 8.58)
- LCH
- lch(68.32 8.69 99.2)
- CMYK
- cmyk(0% 1% 11% 34%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B1AFA1
- BAB8AB
- C2C1B5
- CBC9C0
- D3D2CA
- DCDBD4
- E5E4DF
- EDEDE9
- F6F6F4
Odcienie ciemniejsze
- 929183
- 7C7B6F
- 67665C
- 535249
- 3F3E37
- 2C2C26
- 1B1A17
- 0A0A08
- 010101
Tony
- A5A395
- A19F92
- 9C9B90
- 98978E
- 94938C
- 908F89
- 8C8C87
- 888885
- 848482
Harmonie kolorów
Komplementarna +180°
- A9A797
Amazing Boulder
- A3A5B5
≈ Curated Lilac
Analogowa -30° +30°
- A9A797
Amazing Boulder
- B0A497
≈ Tranquil Taupe
- A1A99B
≈ Moss Agate
Triada +120° +240°
- A9A797
Amazing Boulder
- 98AAB0
≈ Meditative
- B1A1AA
≈ Symbolic
Komplementarna rozszczepiona +150° +210°
- A9A797
Amazing Boulder
- 9CA8B4
≈ Acier Tint
- ABA3B1
≈ Luxe Lilac
Tetrada +90° +180° +270°
- A9A797
Amazing Boulder
- 97ABAA
≈ Grey Mist
- A3A5B5
≈ Curated Lilac
- B4A1A3
≈ Dusky Hyacinth
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.42:1 · APCA Lc 48
Ag
AAANa czerni
WCAG 8.66:1 · APCA Lc 54
Najlepszy kolor tekstu: #000000
WCAG 8.66:1 (AAA) · APCA Lc 54
Contrast pairs
Fragmenty kodu
CSS
:root {
--amazing-boulder: #a9a797;
--amazing-boulder-rgb: 169 167 151;
--amazing-boulder-oklch: oklch(0.725 0.023 101.1);
}
.element {
color: var(--amazing-boulder);
background-color: hsl(53 9% 63%);
border-color: oklch(0.725 0.023 101.1);
}Tailwind CSS v4
@theme {
--color-amazing-boulder: #a9a797;
--color-amazing-boulder-50: #f6f5ee;
--color-amazing-boulder-100: #e9e8e0;
--color-amazing-boulder-200: #d6d5ca;
--color-amazing-boulder-300: #b9b8ab;
--color-amazing-boulder-400: #a19f90;
--color-amazing-boulder-500: #898776;
--color-amazing-boulder-600: #747264;
--color-amazing-boulder-700: #5d5b50;
--color-amazing-boulder-800: #44433a;
--color-amazing-boulder-900: #2f2e28;
--color-amazing-boulder-950: #1c1b16;
}SCSS
$amazing-boulder: #a9a797;
$amazing-boulder-rgb: 169, 167, 151;
$amazing-boulder-light: mix(#fff, $amazing-boulder, 20%);
$amazing-boulder-dark: mix(#000, $amazing-boulder, 20%);
.element {
color: $amazing-boulder;
box-shadow: 0 0 0 2px rgba($amazing-boulder, 0.35);
}