Color con nombre más cercano · #C02A48
#C02A48
Color con nombre más cercano: Bleeding Heart
#C02A48 (rgb(192 42 72), hsl(348 64% 46%), oklch(0.534 0.185 15.5)) se parece más al color con nombre Bleeding Heart. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#C02A48
oklch(0.534 0.185 15.5)
Conversiones de color
- HEX
- #c02a48
- RGB
- rgb(192 42 72)
- HSL
- hsl(348 64% 46%)
- HWB
- hwb(348 16% 25%)
- OKLCH
- oklch(0.534 0.185 15.5)
- OKLab
- oklab(0.534 0.178 0.049)
- CIE Lab
- lab(43.92 59.73 21.79)
- LCH
- lch(43.92 63.58 20)
- CMYK
- cmyk(0% 78% 63% 25%)
Tintes · Sombras · Tonos
Tintes
- C94659
- D25D6A
- DA727C
- E1878E
- E89BA0
- EEAFB2
- F3C3C5
- F8D7D8
- FCEBEB
Sombras
- A7233D
- 8E1C33
- 761629
- 5F101F
- 490A16
- 34050D
- 200206
- 0E0102
- 020000
Tonos
- BB394E
- B64453
- B14E59
- AC575F
- A65F64
- 9F666A
- 986D6F
- 917475
- 897A7A
Armonías de color
Complementario +180°
- C02A48
Bleeding Heart
- 007D7E
≈ Tropical Waters
Análogo -30° +30°
- C02A48
Bleeding Heart
- B23084
≈ Fandango
- B14900
≈ Skrag Brown
Triádico +120° +240°
- C02A48
Bleeding Heart
- 3F8000
≈ Green People
- 006AD1
≈ Royal Navy Blue
Complementario dividido +150° +210°
- C02A48
Bleeding Heart
- 00815D
≈ Spanish Viridian
- 007899
≈ Pristine Seas
Tetrádico +90° +180° +270°
- C02A48
Bleeding Heart
- 777000
≈ Bronze Yellow
- 007D7E
≈ Tropical Waters
- 6854D1
≈ Ameixa
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 5.72:1 · APCA Lc 77
Ag
FailSobre negro
WCAG 3.66:1 · APCA Lc 25
Mejor color de texto: #FFFFFF
WCAG 5.72:1 (AA) · APCA Lc 77
Contrast pairs
Fragmentos de código
CSS
:root {
--bleeding-heart: #c02a48;
--bleeding-heart-rgb: 192 42 72;
--bleeding-heart-oklch: oklch(0.534 0.185 15.5);
}
.element {
color: var(--bleeding-heart);
background-color: hsl(348 64% 46%);
border-color: oklch(0.534 0.185 15.5);
}Tailwind CSS v4
@theme {
--color-bleeding-heart: #c02a48;
--color-bleeding-heart-50: #ffe1e2;
--color-bleeding-heart-100: #ffcfd1;
--color-bleeding-heart-200: #ffb3b7;
--color-bleeding-heart-300: #ff8d94;
--color-bleeding-heart-400: #f7687a;
--color-bleeding-heart-500: #e63e5c;
--color-bleeding-heart-600: #c2364e;
--color-bleeding-heart-700: #9c2b3e;
--color-bleeding-heart-800: #741e2f;
--color-bleeding-heart-900: #521420;
--color-bleeding-heart-950: #37040f;
}SCSS
$bleeding-heart: #c02a48;
$bleeding-heart-rgb: 192, 42, 72;
$bleeding-heart-light: mix(#fff, $bleeding-heart, 20%);
$bleeding-heart-dark: mix(#000, $bleeding-heart, 20%);
.element {
color: $bleeding-heart;
box-shadow: 0 0 0 2px rgba($bleeding-heart, 0.35);
}