Adlandırılmış renk · #A47C53
Burnt Butter
Burnt Butter, #A47C53: rgb(164 124 83), hsl(30 33% 48%), oklch(0.616 0.075 66.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Burnt Butter color name →
#A47C53
oklch(0.616 0.075 66.4)
Renk dönüşümleri
- HEX
- #a47c53
- RGB
- rgb(164 124 83)
- HSL
- hsl(30 33% 48%)
- HWB
- hwb(30 33% 36%)
- OKLCH
- oklch(0.616 0.075 66.4)
- OKLab
- oklab(0.616 0.03 0.069)
- CIE Lab
- lab(55.31 12.24 28.64)
- LCH
- lch(55.31 31.15 66.9)
- CMYK
- cmyk(0% 24% 49% 36%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- AD8964
- B69575
- BFA285
- C8AF96
- D2BCA7
- DBC9B8
- E4D6CA
- EDE4DB
- F6F1ED
Koyu tonlar
- 8E6B47
- 795A3B
- 644A30
- 503B25
- 3D2C1B
- 2B1E11
- 1A1108
- 0A0502
- 010100
Gri tonlar
- A17D58
- 9D7D5D
- 9A7E62
- 967E67
- 927F6B
- 8F7F6F
- 8B7F74
- 888078
- 84807C
Renk uyumları
Tamamlayıcı +180°
- A47C53
Burnt Butter
- 5F8AB0
≈ Lichen Blue
Analog -30° +30°
- A47C53
Burnt Butter
- AD7565
≈ Pajarito Red
- 92854F
≈ Lucky Bamboo
Üçlü +120° +240°
- A47C53
Burnt Butter
- 4A948C
≈ Mirage Lake
- 9079A9
≈ Trumpeter
Bölünmüş tamamlayıcı +150° +210°
- A47C53
Burnt Butter
- 4A90A2
≈ Aegean Sea
- 7981B2
≈ Venture Violet
Dörtlü +90° +180° +270°
- A47C53
Burnt Butter
- 5E9372
≈ Skarsnik Green
- 5F8AB0
≈ Lichen Blue
- A27496
≈ Drama Queen
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.75:1 · APCA Lc 65
Ag
AASiyah üzerinde
WCAG 5.58:1 · APCA Lc 37
En iyi metin rengi: #000000
WCAG 5.58:1 (AA) · APCA Lc 37
Contrast pairs
Kod parçacıkları
CSS
:root {
--burnt-butter: #a47c53;
--burnt-butter-rgb: 164 124 83;
--burnt-butter-oklch: oklch(0.616 0.075 66.4);
}
.element {
color: var(--burnt-butter);
background-color: hsl(30 33% 48%);
border-color: oklch(0.616 0.075 66.4);
}Tailwind CSS v4
@theme {
--color-burnt-butter: #a47c53;
--color-burnt-butter-50: #fff2df;
--color-burnt-butter-100: #f9e4ce;
--color-burnt-butter-200: #eacfb2;
--color-burnt-butter-300: #d2b18e;
--color-burnt-butter-400: #bd966f;
--color-burnt-butter-500: #a87c4e;
--color-burnt-butter-600: #8e6943;
--color-burnt-butter-700: #725435;
--color-burnt-butter-800: #553d26;
--color-burnt-butter-900: #3b2a19;
--color-burnt-butter-950: #25170a;
}SCSS
$burnt-butter: #a47c53;
$burnt-butter-rgb: 164, 124, 83;
$burnt-butter-light: mix(#fff, $burnt-butter, 20%);
$burnt-butter-dark: mix(#000, $burnt-butter, 20%);
.element {
color: $burnt-butter;
box-shadow: 0 0 0 2px rgba($burnt-butter, 0.35);
}