Color con nombre · #F6CD9B
Bagel
Bagel es #F6CD9B: rgb(246 205 155), hsl(33 83% 79%), oklch(0.872 0.08 72). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Bagel color name →
#F6CD9B
oklch(0.872 0.08 72)
Conversiones de color
- HEX
- #f6cd9b
- RGB
- rgb(246 205 155)
- HSL
- hsl(33 83% 79%)
- HWB
- hwb(33 61% 4%)
- OKLCH
- oklch(0.872 0.08 72)
- OKLab
- oklab(0.872 0.025 0.076)
- CIE Lab
- lab(85.13 10 30.64)
- LCH
- lch(85.13 32.23 71.9)
- CMYK
- cmyk(0% 17% 37% 4%)
Tintes · Sombras · Tonos
Tintes
- F7D2A5
- F8D7AF
- F9DCBA
- FAE1C4
- FBE6CE
- FCEBD7
- FDF0E1
- FEF5EB
- FEFAF5
Sombras
- D6B286
- B79872
- 987E5E
- 7B664B
- 5F4E39
- 453828
- 2C2318
- 150F09
- 030201
Tonos
- EAC599
- DEBD96
- D1B594
- C5AE91
- BAA68F
- AE9E8C
- A29789
- 978F86
- 8B8883
Armonías de color
Complementario +180°
- F6CD9B
Bagel
- B7D8FF
≈ Oh Boy!
Análogo -30° +30°
- F6CD9B
Bagel
- FFC6B0
≈ Antique Coral
- DFD79A
≈ Liminality
Triádico +120° +240°
- F6CD9B
Bagel
- 95E6E2
≈ Aqua Fiesta
- E7C6FB
≈ Wisteria Powder
Complementario dividido +150° +210°
- F6CD9B
Bagel
- 99E1FB
≈ Columbia Blue
- CDD0FF
≈ Lavender Blue
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.48:1 · APCA Lc 23
Ag
AAASobre negro
WCAG 14.12:1 · APCA Lc 80
Mejor color de texto: #000000
WCAG 14.12:1 (AAA) · APCA Lc 80
Contrast pairs
Fragmentos de código
CSS
:root {
--bagel: #f6cd9b;
--bagel-rgb: 246 205 155;
--bagel-oklch: oklch(0.872 0.08 72);
}
.element {
color: var(--bagel);
background-color: hsl(33 83% 79%);
border-color: oklch(0.872 0.08 72);
}Tailwind CSS v4
@theme {
--color-bagel: #f6cd9b;
--color-bagel-50: #fff2dd;
--color-bagel-100: #f8e5cb;
--color-bagel-200: #e9d0af;
--color-bagel-300: #d0b28a;
--color-bagel-400: #bc9769;
--color-bagel-500: #a77d48;
--color-bagel-600: #8d6a3e;
--color-bagel-700: #715531;
--color-bagel-800: #543d22;
--color-bagel-900: #3b2a17;
--color-bagel-950: #251808;
}SCSS
$bagel: #f6cd9b;
$bagel-rgb: 246, 205, 155;
$bagel-light: mix(#fff, $bagel, 20%);
$bagel-dark: mix(#000, $bagel, 20%);
.element {
color: $bagel;
box-shadow: 0 0 0 2px rgba($bagel, 0.35);
}