Color con nombre · #FF4444
Tomato Frog
Tomato Frog es #FF4444: rgb(255 68 68), hsl(0 100% 63%), oklch(0.664 0.223 25.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Red mean? → · Tomato Frog color name →
#FF4444
oklch(0.664 0.223 25.7)
Conversiones de color
- HEX
- #ff4444
- RGB
- rgb(255 68 68)
- HSL
- hsl(0 100% 63%)
- HWB
- hwb(0 27% 0%)
- OKLCH
- oklch(0.664 0.223 25.7)
- OKLab
- oklab(0.664 0.201 0.097)
- CIE Lab
- lab(58.74 70.4 45)
- LCH
- lch(58.74 83.55 32.6)
- CMYK
- cmyk(0% 73% 73% 0%)
Tintes · Sombras · Tonos
Tintes
- FF5E58
- FF736B
- FF877E
- FF9990
- FFABA2
- FFBCB5
- FFCDC7
- FFDEDA
- FFEFEC
Sombras
- DE3A3A
- BE3030
- 9E2626
- 801D1D
- 631414
- 480C0C
- 2E0505
- 160202
- 030000
Tonos
- F4504C
- E85953
- DC615A
- D06860
- C46D66
- B8726C
- AB7671
- 9D7A76
- 8F7D7B
Armonías de color
Complementario +180°
- FF4444
Tomato Frog
- 00A7B5
≈ Exotic Sea
Análogo -30° +30°
- FF4444
Tomato Frog
- F44398
≈ Rose Bonbon
- DC7300
≈ Gold Orange
Triádico +120° +240°
- FF4444
Tomato Frog
- 00B237
≈ Try Your Luck
- 5F8CFF
≈ Deep Denim
Complementario dividido +150° +210°
- FF4444
Tomato Frog
- 00AC90
≈ Hobgoblin
- 009FDE
≈ Vanadyl Blue
Tetrádico +90° +180° +270°
- FF4444
Tomato Frog
- 909D00
≈ Pea Soup
- 00A7B5
≈ Exotic Sea
- A071FF
≈ Purple Illusionist
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.40:1 · APCA Lc 60
Ag
AASobre negro
WCAG 6.16:1 · APCA Lc 42
Mejor color de texto: #000000
WCAG 6.16:1 (AA) · APCA Lc 42
Contrast pairs
Fragmentos de código
CSS
:root {
--tomato-frog: #ff4444;
--tomato-frog-rgb: 255 68 68;
--tomato-frog-oklch: oklch(0.664 0.223 25.7);
}
.element {
color: var(--tomato-frog);
background-color: hsl(0 100% 63%);
border-color: oklch(0.664 0.223 25.7);
}Tailwind CSS v4
@theme {
--color-tomato-frog: #ff4444;
--color-tomato-frog-50: #ffddd2;
--color-tomato-frog-100: #ffcbbf;
--color-tomato-frog-200: #ffad9f;
--color-tomato-frog-300: #ff8475;
--color-tomato-frog-400: #ff5954;
--color-tomato-frog-500: #f7142a;
--color-tomato-frog-600: #d11925;
--color-tomato-frog-700: #a8161e;
--color-tomato-frog-800: #7e0c18;
--color-tomato-frog-900: #59080f;
--color-tomato-frog-950: #3c0003;
}SCSS
$tomato-frog: #ff4444;
$tomato-frog-rgb: 255, 68, 68;
$tomato-frog-light: mix(#fff, $tomato-frog, 20%);
$tomato-frog-dark: mix(#000, $tomato-frog, 20%);
.element {
color: $tomato-frog;
box-shadow: 0 0 0 2px rgba($tomato-frog, 0.35);
}