Color con nombre · #FF6622
Sparrow’s Fire
Sparrow’s Fire es #FF6622: rgb(255 102 34), hsl(18 100% 57%), oklch(0.697 0.201 40.8). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Red mean? → · Sparrow’s Fire color name →
#FF6622
oklch(0.697 0.201 40.8)
Conversiones de color
- HEX
- #ff6622
- RGB
- rgb(255 102 34)
- HSL
- hsl(18 100% 57%)
- HWB
- hwb(18 13% 0%)
- OKLCH
- oklch(0.697 0.201 40.8)
- OKLab
- oklab(0.697 0.152 0.131)
- CIE Lab
- lab(63.24 57.33 64.77)
- LCH
- lch(63.24 86.5 48.5)
- CMYK
- cmyk(0% 60% 87% 0%)
Tintes · Sombras · Tonos
Tintes
- FF7842
- FF895B
- FF9971
- FFA886
- FFB79B
- FFC6AF
- FFD5C3
- FFE3D7
- FFF1EB
Sombras
- DE581C
- BE4A16
- 9E3C11
- 802F0B
- 632307
- 481703
- 2E0C01
- 160400
- 030000
Tonos
- F36B34
- E77042
- DB734C
- CF7656
- C3795E
- B67B66
- A97D6D
- 9C7E74
- 8E7F7A
Armonías de color
Complementario +180°
- FF6622
Sparrow’s Fire
- 00AFD5
≈ Battery Charged Blue
Análogo -30° +30°
- FF6622
Sparrow’s Fire
- FF5B7F
≈ Brink Pink
- D78A00
≈ Fleur de Sel Caramel
Triádico +120° +240°
- FF6622
Sparrow’s Fire
- 00BA7D
≈ Fennel Fiesta
- 8D8EFF
≈ Lavender Blue Shadow
Complementario dividido +150° +210°
- FF6622
Sparrow’s Fire
- 00B5AF
≈ Glass Jar Blue
- 40A1FF
≈ Sky Dancer
Tetrádico +90° +180° +270°
- FF6622
Sparrow’s Fire
- 72B300
≈ Leaf Sheep
- 00AFD5
≈ Battery Charged Blue
- C472F7
≈ Illicit Purple
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.92:1 · APCA Lc 55
Ag
AAASobre negro
WCAG 7.17:1 · APCA Lc 47
Mejor color de texto: #000000
WCAG 7.17:1 (AAA) · APCA Lc 47
Contrast pairs
Fragmentos de código
CSS
:root {
--sparrow-s-fire: #ff6622;
--sparrow-s-fire-rgb: 255 102 34;
--sparrow-s-fire-oklch: oklch(0.697 0.201 40.8);
}
.element {
color: var(--sparrow-s-fire);
background-color: hsl(18 100% 57%);
border-color: oklch(0.697 0.201 40.8);
}Tailwind CSS v4
@theme {
--color-sparrow-s-fire: #ff6622;
--color-sparrow-s-fire-50: #ffe3c8;
--color-sparrow-s-fire-100: #ffd2b2;
--color-sparrow-s-fire-200: #ffb78e;
--color-sparrow-s-fire-300: #ff915e;
--color-sparrow-s-fire-400: #fc6b2f;
--color-sparrow-s-fire-500: #eb4000;
--color-sparrow-s-fire-600: #c63800;
--color-sparrow-s-fire-700: #a02d00;
--color-sparrow-s-fire-800: #781e00;
--color-sparrow-s-fire-900: #551400;
--color-sparrow-s-fire-950: #380400;
}SCSS
$sparrow-s-fire: #ff6622;
$sparrow-s-fire-rgb: 255, 102, 34;
$sparrow-s-fire-light: mix(#fff, $sparrow-s-fire, 20%);
$sparrow-s-fire-dark: mix(#000, $sparrow-s-fire, 20%);
.element {
color: $sparrow-s-fire;
box-shadow: 0 0 0 2px rgba($sparrow-s-fire, 0.35);
}