Adlandırılmış renk · #A9A797
Amazing Boulder
Amazing Boulder, #A9A797: rgb(169 167 151), hsl(53 9% 63%), oklch(0.725 0.023 101.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Amazing Boulder color name →
#A9A797
oklch(0.725 0.023 101.1)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- B1AFA1
- BAB8AB
- C2C1B5
- CBC9C0
- D3D2CA
- DCDBD4
- E5E4DF
- EDEDE9
- F6F6F4
Koyu tonlar
- 929183
- 7C7B6F
- 67665C
- 535249
- 3F3E37
- 2C2C26
- 1B1A17
- 0A0A08
- 010101
Gri tonlar
- A5A395
- A19F92
- 9C9B90
- 98978E
- 94938C
- 908F89
- 8C8C87
- 888885
- 848482
Renk uyumları
Tamamlayıcı +180°
- A9A797
Amazing Boulder
- A3A5B5
≈ Curated Lilac
Analog -30° +30°
- A9A797
Amazing Boulder
- B0A497
≈ Tranquil Taupe
- A1A99B
≈ Moss Agate
Üçlü +120° +240°
- A9A797
Amazing Boulder
- 98AAB0
≈ Meditative
- B1A1AA
≈ Symbolic
Bölünmüş tamamlayıcı +150° +210°
- A9A797
Amazing Boulder
- 9CA8B4
≈ Acier Tint
- ABA3B1
≈ Luxe Lilac
Dörtlü +90° +180° +270°
- A9A797
Amazing Boulder
- 97ABAA
≈ Grey Mist
- A3A5B5
≈ Curated Lilac
- B4A1A3
≈ Dusky Hyacinth
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.42:1 · APCA Lc 48
Ag
AAASiyah üzerinde
WCAG 8.66:1 · APCA Lc 54
En iyi metin rengi: #000000
WCAG 8.66:1 (AAA) · APCA Lc 54
Contrast pairs
Kod parçacıkları
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);
}