Adlandırılmış renk · #BB5500
Obscure Orange
Obscure Orange, #BB5500: rgb(187 85 0), hsl(27 100% 37%), oklch(0.569 0.152 49.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Brown mean? → · Obscure Orange color name →
#BB5500
oklch(0.569 0.152 49.2)
Renk dönüşümleri
- HEX
- #bb5500
- RGB
- rgb(187 85 0)
- HSL
- hsl(27 100% 37%)
- HWB
- hwb(27 0% 27%)
- OKLCH
- oklch(0.569 0.152 49.2)
- OKLab
- oklab(0.569 0.099 0.115)
- CIE Lab
- lab(48.97 39.5 58.58)
- LCH
- lch(48.97 70.65 56)
- CMYK
- cmyk(0% 55% 100% 27%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- C3672E
- CC7849
- D38961
- DB9A77
- E2AB8E
- E8BCA4
- EFCCBB
- F4DDD1
- FAEEE8
Koyu tonlar
- A24900
- 8A3D00
- 733100
- 5C2600
- 461C00
- 321100
- 1F0800
- 0D0200
- 020000
Gri tonlar
- B65B1F
- B16030
- AC653D
- A66A48
- A16E53
- 9B725C
- 957666
- 8E796F
- 877D77
Renk uyumları
Tamamlayıcı +180°
- BB5500
Obscure Orange
- 0082AB
≈ Tusche Blue
Analog -30° +30°
- BB5500
Obscure Orange
- C04952
≈ Ladybug
- 9C6D00
≈ Balor Brown
Üçlü +120° +240°
- BB5500
Obscure Orange
- 008C6C
≈ Festive Green
- 7664C9
≈ Ultra Violet
Bölünmüş tamamlayıcı +150° +210°
- BB5500
Obscure Orange
- 00888D
≈ Well Blue
- 3B75CF
≈ Fading Night
Dörtlü +90° +180° +270°
- BB5500
Obscure Orange
- 418B29
≈ Direct Green
- 0082AB
≈ Tusche Blue
- 9C55AF
≈ Purple Plum
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 4.75:1 · APCA Lc 72
Ag
FailSiyah üzerinde
WCAG 4.41:1 · APCA Lc 29
En iyi metin rengi: #FFFFFF
WCAG 4.75:1 (AA) · APCA Lc 72
Contrast pairs
Kod parçacıkları
CSS
:root {
--obscure-orange: #bb5500;
--obscure-orange-rgb: 187 85 0;
--obscure-orange-oklch: oklch(0.569 0.152 49.2);
}
.element {
color: var(--obscure-orange);
background-color: hsl(27 100% 37%);
border-color: oklch(0.569 0.152 49.2);
}Tailwind CSS v4
@theme {
--color-obscure-orange: #bb5500;
--color-obscure-orange-50: #ffeace;
--color-obscure-orange-100: #ffdaba;
--color-obscure-orange-200: #ffc298;
--color-obscure-orange-300: #f5a06d;
--color-obscure-orange-400: #e58044;
--color-obscure-orange-500: #d36000;
--color-obscure-orange-600: #b25207;
--color-obscure-orange-700: #8f4108;
--color-obscure-orange-800: #6b2e07;
--color-obscure-orange-900: #4b1f05;
--color-obscure-orange-950: #310e00;
}SCSS
$obscure-orange: #bb5500;
$obscure-orange-rgb: 187, 85, 0;
$obscure-orange-light: mix(#fff, $obscure-orange, 20%);
$obscure-orange-dark: mix(#000, $obscure-orange, 20%);
.element {
color: $obscure-orange;
box-shadow: 0 0 0 2px rgba($obscure-orange, 0.35);
}