Color con nombre · #BB5F60
Energy Peak
Energy Peak es #BB5F60: rgb(187 95 96), hsl(359 40% 55%), oklch(0.595 0.119 20.6). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Red mean? → · Energy Peak color name →
#BB5F60
oklch(0.595 0.119 20.6)
Conversiones de color
- HEX
- #bb5f60
- RGB
- rgb(187 95 96)
- HSL
- hsl(359 40% 55%)
- HWB
- hwb(359 37% 27%)
- OKLCH
- oklch(0.595 0.119 20.6)
- OKLab
- oklab(0.595 0.111 0.042)
- CIE Lab
- lab(51.8 37.86 17.41)
- LCH
- lch(51.8 41.67 24.7)
- CMYK
- cmyk(0% 49% 49% 27%)
Tintes · Sombras · Tonos
Tintes
- C36F6F
- CB7F7E
- D38F8D
- DA9F9D
- E1AEAD
- E8BEBD
- EECECD
- F4DEDD
- FAEFEE
Sombras
- A25252
- 8A4445
- 733838
- 5C2C2C
- 462020
- 321515
- 1F0A0A
- 0D0303
- 020000
Tonos
- B66363
- B16767
- AB6B6A
- A66E6D
- A07270
- 9A7574
- 947877
- 8E7B7A
- 877D7D
Armonías de color
Complementario +180°
- BB5F60
Energy Peak
- 009097
≈ Splashy
Análogo -30° +30°
- BB5F60
Energy Peak
- B35F88
≈ Dahlia Mauve
- B66837
≈ Mincemeat
Triádico +120° +240°
- BB5F60
Energy Peak
- 55904A
≈ Virgo Green Goddess
- 557EC5
≈ Blue Iolite
Complementario dividido +150° +210°
- BB5F60
Energy Peak
- 009575
≈ Pool Table
- 038AB8
≈ Spinnaker Blue
Tetrádico +90° +180° +270°
- BB5F60
Energy Peak
- 83851F
≈ Trendy Green
- 009097
≈ Splashy
- 7F71C0
≈ Venus Violet
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 4.26:1 · APCA Lc 69
Ag
AASobre negro
WCAG 4.91:1 · APCA Lc 33
Mejor color de texto: #000000
WCAG 4.91:1 (AA) · APCA Lc 33
Contrast pairs
Fragmentos de código
CSS
:root {
--energy-peak: #bb5f60;
--energy-peak-rgb: 187 95 96;
--energy-peak-oklch: oklch(0.595 0.119 20.6);
}
.element {
color: var(--energy-peak);
background-color: hsl(359 40% 55%);
border-color: oklch(0.595 0.119 20.6);
}Tailwind CSS v4
@theme {
--color-energy-peak: #bb5f60;
--color-energy-peak-50: #ffe9e6;
--color-energy-peak-100: #ffd9d6;
--color-energy-peak-200: #ffc1bd;
--color-energy-peak-300: #ee9f9b;
--color-energy-peak-400: #dc8180;
--color-energy-peak-500: #c96264;
--color-energy-peak-600: #a95455;
--color-energy-peak-700: #884344;
--color-energy-peak-800: #653032;
--color-energy-peak-900: #472022;
--color-energy-peak-950: #2e0f11;
}SCSS
$energy-peak: #bb5f60;
$energy-peak-rgb: 187, 95, 96;
$energy-peak-light: mix(#fff, $energy-peak, 20%);
$energy-peak-dark: mix(#000, $energy-peak, 20%);
.element {
color: $energy-peak;
box-shadow: 0 0 0 2px rgba($energy-peak, 0.35);
}