Color con nombre · #7CA7CB
Madam Butterfly
Madam Butterfly es #7CA7CB: rgb(124 167 203), hsl(207 43% 64%), oklch(0.711 0.07 244.3). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Blue mean? → · Madam Butterfly color name →
#7CA7CB
oklch(0.711 0.07 244.3)
Conversiones de color
- HEX
- #7ca7cb
- RGB
- rgb(124 167 203)
- HSL
- hsl(207 43% 64%)
- HWB
- hwb(207 49% 20%)
- OKLCH
- oklch(0.711 0.07 244.3)
- OKLab
- oklab(0.711 -0.031 -0.063)
- CIE Lab
- lab(66.37 -8.11 -23.39)
- LCH
- lch(66.37 24.76 250.9)
- CMYK
- cmyk(39% 18% 0% 20%)
Tintes · Sombras · Tonos
Tintes
- 89B0D0
- 96B8D6
- A3C1DB
- B0CAE0
- BDD3E5
- CADBEB
- D7E4F0
- E4EDF5
- F2F6FA
Sombras
- 6B91B0
- 5A7B96
- 4A667D
- 3B5265
- 2C3E4D
- 1E2C37
- 111A22
- 050A0F
- 010102
Tonos
- 7DA3C3
- 7E9FBC
- 7E9BB4
- 7F97AD
- 7F94A5
- 7F909E
- 808C96
- 80888F
- 808487
Armonías de color
Complementario +180°
- 7CA7CB
Madam Butterfly
- C19973
≈ Lanyard
Análogo -30° +30°
- 7CA7CB
Madam Butterfly
- 6CADBD
≈ Water Music
- 949FCE
≈ Ceil
Triádico +120° +240°
- 7CA7CB
Madam Butterfly
- C8909C
≈ Beetroot Rice
- 98AA79
≈ Siamese Green
Complementario dividido +150° +210°
- 7CA7CB
Madam Butterfly
- CA9285
≈ Mexican Moonlight
- B0A16F
≈ Zucchini Garden
Tetrádico +90° +180° +270°
- 7CA7CB
Madam Butterfly
- BE91B4
≈ Mauve Magic
- C19973
≈ Lanyard
- 7FAF8E
≈ Zephyr Green
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.54:1 · APCA Lc 50
Ag
AAASobre negro
WCAG 8.24:1 · APCA Lc 52
Mejor color de texto: #000000
WCAG 8.24:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmentos de código
CSS
:root {
--madam-butterfly: #7ca7cb;
--madam-butterfly-rgb: 124 167 203;
--madam-butterfly-oklch: oklch(0.711 0.07 244.3);
}
.element {
color: var(--madam-butterfly);
background-color: hsl(207 43% 64%);
border-color: oklch(0.711 0.07 244.3);
}Tailwind CSS v4
@theme {
--color-madam-butterfly: #7ca7cb;
--color-madam-butterfly-50: #e6f8ff;
--color-madam-butterfly-100: #d6ebff;
--color-madam-butterfly-200: #bdd8f1;
--color-madam-butterfly-300: #9bbcda;
--color-madam-butterfly-400: #7ba4c6;
--color-madam-butterfly-500: #5d8bb2;
--color-madam-butterfly-600: #4f7696;
--color-madam-butterfly-700: #3f5e78;
--color-madam-butterfly-800: #2c4559;
--color-madam-butterfly-900: #1e303e;
--color-madam-butterfly-950: #0d1c27;
}SCSS
$madam-butterfly: #7ca7cb;
$madam-butterfly-rgb: 124, 167, 203;
$madam-butterfly-light: mix(#fff, $madam-butterfly, 20%);
$madam-butterfly-dark: mix(#000, $madam-butterfly, 20%);
.element {
color: $madam-butterfly;
box-shadow: 0 0 0 2px rgba($madam-butterfly, 0.35);
}