Cor nomeada · #F59D59
Bergamot Orange
Bergamot Orange é #F59D59: rgb(245 157 89), hsl(26 89% 65%), oklch(0.772 0.134 56.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Bergamot Orange color name →
#F59D59
oklch(0.772 0.134 56.7)
Conversões de cor
- HEX
- #f59d59
- RGB
- rgb(245 157 89)
- HSL
- hsl(26 89% 65%)
- HWB
- hwb(26 35% 4%)
- OKLCH
- oklch(0.772 0.134 56.7)
- OKLab
- oklab(0.772 0.074 0.112)
- CIE Lab
- lab(72.95 29.3 49.14)
- LCH
- lch(72.95 57.21 59.2)
- CMYK
- cmyk(0% 36% 64% 4%)
Tons claros · Sombras · Tons
Tons claros
- F7A76C
- F9B17D
- FABB8E
- FCC59F
- FDCFAF
- FED9BF
- FEE2CF
- FFECDF
- FFF5EF
Sombras
- D5884C
- B67340
- 985F34
- 7B4C28
- 5F3A1D
- 442813
- 2B1809
- 150903
- 030100
Tons
- E99B5F
- DE9864
- D29569
- C6936E
- BB9071
- AF8D75
- A38A78
- 98877B
- 8C837E
Harmonias de cor
Complementar +180°
- F59D59
Bergamot Orange
- 51C1FF
≈ Hello Summer
Análoga -30° +30°
- F59D59
Bergamot Orange
- FF9186
≈ Desert Flower
- DAAE40
≈ Yarrow
Tríade +120° +240°
- F59D59
Bergamot Orange
- 2ED0B3
≈ Mint Leaf
- BDA2FF
≈ Diva
Complementar dividida +150° +210°
- F59D59
Bergamot Orange
- 00CCDF
≈ Picnic Day Sky
- 93B3FF
≈ Carolina Blue
Tétrade +90° +180° +270°
- F59D59
Bergamot Orange
- 77CC81
≈ Serengeti Green
- 51C1FF
≈ Hello Summer
- E295E2
≈ Love Dust
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.13:1 · APCA Lc 42
Ag
AAASobre preto
WCAG 9.84:1 · APCA Lc 61
Melhor cor de texto: #000000
WCAG 9.84:1 (AAA) · APCA Lc 61
Contrast pairs
Trechos de código
CSS
:root {
--bergamot-orange: #f59d59;
--bergamot-orange-rgb: 245 157 89;
--bergamot-orange-oklch: oklch(0.772 0.134 56.7);
}
.element {
color: var(--bergamot-orange);
background-color: hsl(26 89% 65%);
border-color: oklch(0.772 0.134 56.7);
}Tailwind CSS v4
@theme {
--color-bergamot-orange: #f59d59;
--color-bergamot-orange-50: #ffedd0;
--color-bergamot-orange-100: #ffdebc;
--color-bergamot-orange-200: #ffc79b;
--color-bergamot-orange-300: #eba670;
--color-bergamot-orange-400: #da8848;
--color-bergamot-orange-500: #c76a0a;
--color-bergamot-orange-600: #a85b10;
--color-bergamot-orange-700: #87480d;
--color-bergamot-orange-800: #65330a;
--color-bergamot-orange-900: #472306;
--color-bergamot-orange-950: #2e1200;
}SCSS
$bergamot-orange: #f59d59;
$bergamot-orange-rgb: 245, 157, 89;
$bergamot-orange-light: mix(#fff, $bergamot-orange, 20%);
$bergamot-orange-dark: mix(#000, $bergamot-orange, 20%);
.element {
color: $bergamot-orange;
box-shadow: 0 0 0 2px rgba($bergamot-orange, 0.35);
}