Cor nomeada · #BB5500
Obscure Orange
Obscure Orange é #BB5500: rgb(187 85 0), hsl(27 100% 37%), oklch(0.569 0.152 49.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Brown mean? → · Obscure Orange color name →
#BB5500
oklch(0.569 0.152 49.2)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- C3672E
- CC7849
- D38961
- DB9A77
- E2AB8E
- E8BCA4
- EFCCBB
- F4DDD1
- FAEEE8
Sombras
- A24900
- 8A3D00
- 733100
- 5C2600
- 461C00
- 321100
- 1F0800
- 0D0200
- 020000
Tons
- B65B1F
- B16030
- AC653D
- A66A48
- A16E53
- 9B725C
- 957666
- 8E796F
- 877D77
Harmonias de cor
Complementar +180°
- BB5500
Obscure Orange
- 0082AB
≈ Tusche Blue
Análoga -30° +30°
- BB5500
Obscure Orange
- C04952
≈ Ladybug
- 9C6D00
≈ Balor Brown
Tríade +120° +240°
- BB5500
Obscure Orange
- 008C6C
≈ Festive Green
- 7664C9
≈ Ultra Violet
Complementar dividida +150° +210°
- BB5500
Obscure Orange
- 00888D
≈ Well Blue
- 3B75CF
≈ Fading Night
Tétrade +90° +180° +270°
- BB5500
Obscure Orange
- 418B29
≈ Direct Green
- 0082AB
≈ Tusche Blue
- 9C55AF
≈ Purple Plum
Contraste e acessibilidade
Ag
AASobre branco
WCAG 4.75:1 · APCA Lc 72
Ag
FailSobre preto
WCAG 4.41:1 · APCA Lc 29
Melhor cor de texto: #FFFFFF
WCAG 4.75:1 (AA) · APCA Lc 72
Contrast pairs
Trechos de código
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);
}