Cor nomeada · #FF7F50
Coral
Coral é #FF7F50: rgb(255 127 80), hsl(16 100% 66%), oklch(0.735 0.168 40.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Coral color name →
#FF7F50
oklch(0.735 0.168 40.2)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- FF8D63
- FF9B76
- FFA887
- FFB599
- FFC1AA
- FFCEBB
- FFDACC
- FFE7DD
- FFF3EE
Sombras
- DE6E44
- BE5D39
- 9E4C2E
- 803C24
- 632D1A
- 481F10
- 2E1107
- 160602
- 030100
Tons
- F38057
- E6815D
- DA8263
- CE8368
- C1836D
- B58371
- A88275
- 9B8279
- 8E817D
Harmonias de cor
Complementar +180°
- FF7F50
Coral
- 00BCE3
≈ Maldives
Análoga -30° +30°
- FF7F50
Coral
- FF7791
≈ Carnation
- E79500
≈ Autumn Yellow
Tríade +120° +240°
- FF7F50
Coral
- 00C885
≈ Retro Lime
- 999EFF
≈ Cobalite
Complementar dividida +150° +210°
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.49:1 · APCA Lc 48
Ag
AAASobre preto
WCAG 8.40:1 · APCA Lc 53
Melhor cor de texto: #000000
WCAG 8.40:1 (AAA) · APCA Lc 53
Contrast pairs
Trechos 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);
}