Color con nombre más cercano · #F45A00
#F45A00
Color con nombre más cercano: Poppy Flower
#F45A00 (rgb(244 90 0), hsl(22 100% 48%), oklch(0.664 0.203 41.3)) se parece más al color con nombre Poppy Flower. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#F45A00
oklch(0.664 0.203 41.3)
Conversiones de color
- HEX
- #f45a00
- RGB
- rgb(244 90 0)
- HSL
- hsl(22 100% 48%)
- HWB
- hwb(22 0% 4%)
- OKLCH
- oklch(0.664 0.203 41.3)
- OKLab
- oklab(0.664 0.153 0.134)
- CIE Lab
- lab(59.4 58.16 69.77)
- LCH
- lch(59.4 90.83 50.2)
- CMYK
- cmyk(0% 63% 100% 4%)
Tintes · Sombras · Tonos
Tintes
- F86E34
- FB8050
- FE9168
- FFA27F
- FFB294
- FFC2AA
- FFD1BF
- FFE1D4
- FFF0EA
Sombras
- D44D00
- B54100
- 973500
- 7A2900
- 5E1E00
- 441300
- 2B0900
- 140300
- 030000
Tonos
- E96125
- DF6736
- D46C43
- C9704E
- BE7458
- B27761
- A67A6A
- 9A7C71
- 8D7E79
Armonías de color
Complementario +180°
- F45A00
Poppy Flower
- 00A3C8
≈ Cyan Blue
Análogo -30° +30°
- F45A00
Poppy Flower
- F54D73
≈ Bonker Pink
- C98200
≈ Bubonic Brown
Triádico +120° +240°
- F45A00
Poppy Flower
- 00AE76
≈ Bright Camouflage
- 8380FF
≈ Blue Party Parrot
Complementario dividido +150° +210°
- F45A00
Poppy Flower
- 00A9A4
≈ Jade Orchid
- 1D96FF
≈ Starfleet Blue
Tetrádico +90° +180° +270°
- F45A00
Poppy Flower
- 69A800
≈ Dark Slimelime
- 00A3C8
≈ Cyan Blue
- BB66ED
≈ Queer Purple
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.32:1 · APCA Lc 60
Ag
AASobre negro
WCAG 6.30:1 · APCA Lc 42
Mejor color de texto: #000000
WCAG 6.30:1 (AA) · APCA Lc 42
Contrast pairs
Fragmentos de código
CSS
:root {
--poppy-flower: #f45a00;
--poppy-flower-rgb: 244 90 0;
--poppy-flower-oklch: oklch(0.664 0.203 41.3);
}
.element {
color: var(--poppy-flower);
background-color: hsl(22 100% 48%);
border-color: oklch(0.664 0.203 41.3);
}Tailwind CSS v4
@theme {
--color-poppy-flower: #f45a00;
--color-poppy-flower-50: #ffe3c7;
--color-poppy-flower-100: #ffd2b1;
--color-poppy-flower-200: #ffb78c;
--color-poppy-flower-300: #ff915c;
--color-poppy-flower-400: #fd6b2b;
--color-poppy-flower-500: #ec3f00;
--color-poppy-flower-600: #c73700;
--color-poppy-flower-700: #a02c00;
--color-poppy-flower-800: #781d00;
--color-poppy-flower-900: #551400;
--color-poppy-flower-950: #390400;
}SCSS
$poppy-flower: #f45a00;
$poppy-flower-rgb: 244, 90, 0;
$poppy-flower-light: mix(#fff, $poppy-flower, 20%);
$poppy-flower-dark: mix(#000, $poppy-flower, 20%);
.element {
color: $poppy-flower;
box-shadow: 0 0 0 2px rgba($poppy-flower, 0.35);
}