Cor nomeada · #FC7604
Butternut Squash
Butternut Squash é #FC7604: rgb(252 118 4), hsl(28 98% 50%), oklch(0.713 0.189 49.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Butternut Squash color name →
#FC7604
oklch(0.713 0.189 49.4)
Conversões de cor
- HEX
- #fc7604
- RGB
- rgb(252 118 4)
- HSL
- hsl(28 98% 50%)
- HWB
- hwb(28 2% 1%)
- OKLCH
- oklch(0.713 0.189 49.4)
- OKLab
- oklab(0.713 0.123 0.144)
- CIE Lab
- lab(65.48 49 72.77)
- LCH
- lch(65.48 87.73 56)
- CMYK
- cmyk(0% 53% 98% 1%)
Tons claros · Sombras · Tons
Tons claros
- FE8639
- FF9455
- FFA36D
- FFB083
- FFBE99
- FFCBAD
- FFD8C2
- FFE5D6
- FFF2EB
Sombras
- DB6603
- BB5602
- 9C4701
- 7E3801
- 622900
- 471C00
- 2D0F00
- 160500
- 030100
Tons
- F07929
- E47B3A
- D87D48
- CC7E52
- C07F5C
- B48064
- A7816C
- 9B8173
- 8E807A
Harmonias de cor
Complementar +180°
- FC7604
Butternut Squash
- 00B2E8
≈ Lynx Screen Blue
Análoga -30° +30°
- FC7604
Butternut Squash
- FF6B74
≈ Begonia
- D39600
≈ Leopard
Tríade +120° +240°
- FC7604
Butternut Squash
- 00BE94
≈ Blarney
- A18EFF
≈ Cobalite
Complementar dividida +150° +210°
- FC7604
Butternut Squash
- 00B9BF
≈ Cyan Sky
- 67A2FF
≈ Âbi Blue
Tétrade +90° +180° +270°
- FC7604
Butternut Squash
- 5ABD3D
≈ Exit Light
- 00B2E8
≈ Lynx Screen Blue
- D476EC
≈ Calypso Orchid
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.71:1 · APCA Lc 52
Ag
AAASobre preto
WCAG 7.73:1 · APCA Lc 50
Melhor cor de texto: #000000
WCAG 7.73:1 (AAA) · APCA Lc 50
Contrast pairs
Trechos de código
CSS
:root {
--butternut-squash: #fc7604;
--butternut-squash-rgb: 252 118 4;
--butternut-squash-oklch: oklch(0.713 0.189 49.4);
}
.element {
color: var(--butternut-squash);
background-color: hsl(28 98% 50%);
border-color: oklch(0.713 0.189 49.4);
}Tailwind CSS v4
@theme {
--color-butternut-squash: #fc7604;
--color-butternut-squash-50: #ffe7c4;
--color-butternut-squash-100: #ffd6ae;
--color-butternut-squash-200: #ffbd88;
--color-butternut-squash-300: #ff9855;
--color-butternut-squash-400: #f37517;
--color-butternut-squash-500: #e24f00;
--color-butternut-squash-600: #bf4500;
--color-butternut-squash-700: #9a3700;
--color-butternut-squash-800: #732600;
--color-butternut-squash-900: #511900;
--color-butternut-squash-950: #360800;
}SCSS
$butternut-squash: #fc7604;
$butternut-squash-rgb: 252, 118, 4;
$butternut-squash-light: mix(#fff, $butternut-squash, 20%);
$butternut-squash-dark: mix(#000, $butternut-squash, 20%);
.element {
color: $butternut-squash;
box-shadow: 0 0 0 2px rgba($butternut-squash, 0.35);
}