Color con nombre · #FFA00A
Bonus Level
Bonus Level es #FFA00A: rgb(255 160 10), hsl(37 100% 52%), oklch(0.784 0.171 67.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Bonus Level color name →
#FFA00A
oklch(0.784 0.171 67.7)
Conversiones de color
- HEX
- #ffa00a
- RGB
- rgb(255 160 10)
- HSL
- hsl(37 100% 52%)
- HWB
- hwb(37 4% 0%)
- OKLCH
- oklch(0.784 0.171 67.7)
- OKLab
- oklab(0.784 0.065 0.158)
- CIE Lab
- lab(74.49 30.05 77.34)
- LCH
- lch(74.49 82.98 68.8)
- CMYK
- cmyk(0% 37% 96% 0%)
Tintes · Sombras · Tonos
Tintes
- FFAA3F
- FFB45C
- FFBE74
- FFC88A
- FFD19E
- FFDBB2
- FFE4C6
- FFEDD9
- FFF6EC
Sombras
- DE8B07
- BE7605
- 9E6103
- 804E02
- 633B01
- 482901
- 2E1900
- 160900
- 030100
Tonos
- F29D2F
- E59B40
- D9984E
- CC9558
- BF9261
- B38F69
- A68B6F
- 9A8875
- 8D847B
Armonías de color
Complementario +180°
- FFA00A
Bonus Level
- 7ABFFF
≈ Cooler Than Ever
Análogo -30° +30°
- FFA00A
Bonus Level
- FF9A7B
≈ Flash in the Pan
- D5B800
≈ Lionhead
Triádico +120° +240°
- FFA00A
Bonus Level
- 00D4C8
≈ Turquoise Panic
- D29FFF
≈ Plasma Trail
Complementario dividido +150° +210°
- FFA00A
Bonus Level
- 00CDF4
≈ Picnic Day Sky
- A8B2FF
≈ Winterspring Lilac
Tetrádico +90° +180° +270°
- FFA00A
Bonus Level
- 33D98D
≈ Reptile Green
- 7ABFFF
≈ Cooler Than Ever
- FD8ADF
≈ Pink Delight
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.04:1 · APCA Lc 39
Ag
AAASobre negro
WCAG 10.28:1 · APCA Lc 63
Mejor color de texto: #000000
WCAG 10.28:1 (AAA) · APCA Lc 63
Contrast pairs
Fragmentos de código
CSS
:root {
--bonus-level: #ffa00a;
--bonus-level-rgb: 255 160 10;
--bonus-level-oklch: oklch(0.784 0.171 67.7);
}
.element {
color: var(--bonus-level);
background-color: hsl(37 100% 52%);
border-color: oklch(0.784 0.171 67.7);
}Tailwind CSS v4
@theme {
--color-bonus-level: #ffa00a;
--color-bonus-level-50: #ffedc1;
--color-bonus-level-100: #ffdfaa;
--color-bonus-level-200: #ffc781;
--color-bonus-level-300: #efa64a;
--color-bonus-level-400: #df8700;
--color-bonus-level-500: #cd6800;
--color-bonus-level-600: #ad5900;
--color-bonus-level-700: #8b4700;
--color-bonus-level-800: #683200;
--color-bonus-level-900: #492200;
--color-bonus-level-950: #301100;
}SCSS
$bonus-level: #ffa00a;
$bonus-level-rgb: 255, 160, 10;
$bonus-level-light: mix(#fff, $bonus-level, 20%);
$bonus-level-dark: mix(#000, $bonus-level, 20%);
.element {
color: $bonus-level;
box-shadow: 0 0 0 2px rgba($bonus-level, 0.35);
}