Adlandırılmış renk · #D4BCA3
Nutty Beige
Nutty Beige, #D4BCA3: rgb(212 188 163), hsl(31 36% 74%), oklch(0.809 0.044 68.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Nutty Beige color name →
#D4BCA3
oklch(0.809 0.044 68.3)
Renk dönüşümleri
- HEX
- #d4bca3
- RGB
- rgb(212 188 163)
- HSL
- hsl(31 36% 74%)
- HWB
- hwb(31 64% 17%)
- OKLCH
- oklch(0.809 0.044 68.3)
- OKLab
- oklab(0.809 0.016 0.041)
- CIE Lab
- lab(77.83 5.96 15.99)
- LCH
- lch(77.83 17.07 69.6)
- CMYK
- cmyk(0% 11% 23% 17%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D8C3AC
- DDC9B5
- E1D0BE
- E5D6C7
- EADDD0
- EEE4DA
- F2EBE3
- F6F1EC
- FBF8F6
Koyu tonlar
- B8A38D
- 9D8B78
- 837363
- 695D4F
- 51473C
- 3A322A
- 241F19
- 100D0A
- 020201
Gri tonlar
- CBB6A0
- C3B09C
- BAAA99
- B2A495
- A99E92
- A1988E
- 99928B
- 908C87
- 888684
Renk uyumları
Tamamlayıcı +180°
- D4BCA3
Nutty Beige
- ABC4DC
≈ Blue Prism
Analog -30° +30°
- D4BCA3
Nutty Beige
- DBB8AC
≈ Toasted Beige
- C8C1A2
≈ Moth
Üçlü +120° +240°
- D4BCA3
Nutty Beige
- A1CAC6
≈ Eggshell Blue
- C8BAD7
≈ Purple Shine
Bölünmüş tamamlayıcı +150° +210°
- D4BCA3
Nutty Beige
- A2C8D4
≈ Blue Dam
- BABEDD
≈ Rhapsody Lilac
Dörtlü +90° +180° +270°
- D4BCA3
Nutty Beige
- AACAB6
≈ Gum Leaf
- ABC4DC
≈ Blue Prism
- D4B6CA
≈ Icing Flower
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.82:1 · APCA Lc 34
Ag
AAASiyah üzerinde
WCAG 11.52:1 · APCA Lc 69
En iyi metin rengi: #000000
WCAG 11.52:1 (AAA) · APCA Lc 69
Contrast pairs
Kod parçacıkları
CSS
:root {
--nutty-beige: #d4bca3;
--nutty-beige-rgb: 212 188 163;
--nutty-beige-oklch: oklch(0.809 0.044 68.3);
}
.element {
color: var(--nutty-beige);
background-color: hsl(31 36% 74%);
border-color: oklch(0.809 0.044 68.3);
}Tailwind CSS v4
@theme {
--color-nutty-beige: #d4bca3;
--color-nutty-beige-50: #fef3e8;
--color-nutty-beige-100: #f2e6d9;
--color-nutty-beige-200: #e1d1c1;
--color-nutty-beige-300: #c6b4a0;
--color-nutty-beige-400: #b09a83;
--color-nutty-beige-500: #9a8167;
--color-nutty-beige-600: #826d58;
--color-nutty-beige-700: #685746;
--color-nutty-beige-800: #4d4032;
--color-nutty-beige-900: #362c22;
--color-nutty-beige-950: #211911;
}SCSS
$nutty-beige: #d4bca3;
$nutty-beige-rgb: 212, 188, 163;
$nutty-beige-light: mix(#fff, $nutty-beige, 20%);
$nutty-beige-dark: mix(#000, $nutty-beige, 20%);
.element {
color: $nutty-beige;
box-shadow: 0 0 0 2px rgba($nutty-beige, 0.35);
}