Color con nombre · #FFC5A3
Tomorrow’s Coral
Tomorrow’s Coral es #FFC5A3: rgb(255 197 163), hsl(22 100% 82%), oklch(0.867 0.081 51.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Tomorrow’s Coral color name →
#FFC5A3
oklch(0.867 0.081 51.7)
Conversiones de color
- HEX
- #ffc5a3
- RGB
- rgb(255 197 163)
- HSL
- hsl(22 100% 82%)
- HWB
- hwb(22 64% 0%)
- OKLCH
- oklch(0.867 0.081 51.7)
- OKLab
- oklab(0.867 0.05 0.063)
- CIE Lab
- lab(84.22 18.12 25.49)
- LCH
- lch(84.22 31.28 54.6)
- CMYK
- cmyk(0% 23% 36% 0%)
Tintes · Sombras · Tonos
Tintes
- FFCBAC
- FFD1B6
- FFD7BF
- FFDCC8
- FFE2D1
- FFE8DA
- FFEEE3
- FFF4ED
- FFF9F6
Sombras
- DEAB8D
- BE9278
- 9E7963
- 80614F
- 634B3C
- 48352A
- 2E2119
- 160E0A
- 030201
Tonos
- F2BEA0
- E5B79C
- D8B099
- CBA996
- BEA292
- B29B8F
- A5948B
- 998E87
- 8C8784
Armonías de color
Complementario +180°
- FFC5A3
Tomorrow’s Coral
- 9DDDFF
≈ Columbia Blue
Análogo -30° +30°
- FFC5A3
Tomorrow’s Coral
- FFC2BF
≈ Ladylike
- EECF96
≈ Sparkling Champagne
Triádico +120° +240°
- FFC5A3
Tomorrow’s Coral
- 9CE5CD
≈ Aqua Wish
- D3CCFF
≈ Lavender Blue
Complementario dividido +150° +210°
- FFC5A3
Tomorrow’s Coral
- 91E4EA
≈ Aqua Fiesta
- BCD4FF
≈ Ice Cold Stare
Tetrádico +90° +180° +270°
- FFC5A3
Tomorrow’s Coral
- B6E1B0
≈ Mint Cocktail Green
- 9DDDFF
≈ Columbia Blue
- EDC2F3
≈ Purple’s Baby Sister
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.52:1 · APCA Lc 24
Ag
AAASobre negro
WCAG 13.76:1 · APCA Lc 79
Mejor color de texto: #000000
WCAG 13.76:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmentos de código
CSS
:root {
--tomorrow-s-coral: #ffc5a3;
--tomorrow-s-coral-rgb: 255 197 163;
--tomorrow-s-coral-oklch: oklch(0.867 0.081 51.7);
}
.element {
color: var(--tomorrow-s-coral);
background-color: hsl(22 100% 82%);
border-color: oklch(0.867 0.081 51.7);
}Tailwind CSS v4
@theme {
--color-tomorrow-s-coral: #ffc5a3;
--color-tomorrow-s-coral-50: #fff0e0;
--color-tomorrow-s-coral-100: #ffe1cf;
--color-tomorrow-s-coral-200: #f1ccb5;
--color-tomorrow-s-coral-300: #d9ad91;
--color-tomorrow-s-coral-400: #c59172;
--color-tomorrow-s-coral-500: #b17653;
--color-tomorrow-s-coral-600: #956447;
--color-tomorrow-s-coral-700: #785038;
--color-tomorrow-s-coral-800: #593a29;
--color-tomorrow-s-coral-900: #3e281b;
--color-tomorrow-s-coral-950: #27160c;
}SCSS
$tomorrow-s-coral: #ffc5a3;
$tomorrow-s-coral-rgb: 255, 197, 163;
$tomorrow-s-coral-light: mix(#fff, $tomorrow-s-coral, 20%);
$tomorrow-s-coral-dark: mix(#000, $tomorrow-s-coral, 20%);
.element {
color: $tomorrow-s-coral;
box-shadow: 0 0 0 2px rgba($tomorrow-s-coral, 0.35);
}