Color con nombre · #FF7F50
Coral
Coral es #FF7F50: rgb(255 127 80), hsl(16 100% 66%), oklch(0.735 0.168 40.2). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Red mean? → · Coral color name →
#FF7F50
oklch(0.735 0.168 40.2)
Conversiones de color
- HEX
- #ff7f50
- RGB
- rgb(255 127 80)
- HSL
- hsl(16 100% 66%)
- HWB
- hwb(16 31% 0%)
- OKLCH
- oklch(0.735 0.168 40.2)
- OKLab
- oklab(0.735 0.128 0.109)
- CIE Lab
- lab(67.98 47.38 48.6)
- LCH
- lch(67.98 67.88 45.7)
- CMYK
- cmyk(0% 50% 69% 0%)
Tintes · Sombras · Tonos
Tintes
- FF8D63
- FF9B76
- FFA887
- FFB599
- FFC1AA
- FFCEBB
- FFDACC
- FFE7DD
- FFF3EE
Sombras
- DE6E44
- BE5D39
- 9E4C2E
- 803C24
- 632D1A
- 481F10
- 2E1107
- 160602
- 030100
Tonos
- F38057
- E6815D
- DA8263
- CE8368
- C1836D
- B58371
- A88275
- 9B8279
- 8E817D
Armonías de color
Complementario +180°
- FF7F50
Coral
- 00BCE3
≈ Maldives
Análogo -30° +30°
- FF7F50
Coral
- FF7791
≈ Carnation
- E79500
≈ Autumn Yellow
Triádico +120° +240°
- FF7F50
Coral
- 00C885
≈ Retro Lime
- 999EFF
≈ Cobalite
Complementario dividido +150° +210°
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.49:1 · APCA Lc 48
Ag
AAASobre negro
WCAG 8.40:1 · APCA Lc 53
Mejor color de texto: #000000
WCAG 8.40:1 (AAA) · APCA Lc 53
Contrast pairs
Fragmentos de código
CSS
:root {
--coral: #ff7f50;
--coral-rgb: 255 127 80;
--coral-oklch: oklch(0.735 0.168 40.2);
}
.element {
color: var(--coral);
background-color: hsl(16 100% 66%);
border-color: oklch(0.735 0.168 40.2);
}Tailwind CSS v4
@theme {
--color-coral: #ff7f50;
--color-coral-50: #ffe6d0;
--color-coral-100: #ffd6bc;
--color-coral-200: #ffbd9b;
--color-coral-300: #ff9970;
--color-coral-400: #ef774b;
--color-coral-500: #dd5315;
--color-coral-600: #bb4716;
--color-coral-700: #963912;
--color-coral-800: #70280e;
--color-coral-900: #4f1b09;
--color-coral-950: #340a00;
}SCSS
$coral: #ff7f50;
$coral-rgb: 255, 127, 80;
$coral-light: mix(#fff, $coral, 20%);
$coral-dark: mix(#000, $coral, 20%);
.element {
color: $coral;
box-shadow: 0 0 0 2px rgba($coral, 0.35);
}