Color con nombre · #C2937B
Potter’s Pink
Potter’s Pink es #C2937B: rgb(194 147 123), hsl(20 37% 62%), oklch(0.702 0.066 48.3). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Potter’s Pink color name →
#C2937B
oklch(0.702 0.066 48.3)
Conversiones de color
- HEX
- #c2937b
- RGB
- rgb(194 147 123)
- HSL
- hsl(20 37% 62%)
- HWB
- hwb(20 48% 24%)
- OKLCH
- oklch(0.702 0.066 48.3)
- OKLab
- oklab(0.702 0.044 0.05)
- CIE Lab
- lab(65.06 15.88 19.97)
- LCH
- lch(65.06 25.51 51.5)
- CMYK
- cmyk(0% 24% 37% 24%)
Tintes · Sombras · Tonos
Tintes
- C89E88
- CFA895
- D5B3A1
- DBBDAF
- E1C8BC
- E7D3C9
- EDDED6
- F3E9E4
- F9F4F1
Sombras
- A87F6A
- 8F6C5A
- 77594A
- 60473A
- 49362C
- 34251E
- 201610
- 0E0805
- 020101
Tonos
- BB917C
- B58F7C
- AE8E7D
- A88C7E
- A18A7E
- 9B887F
- 94867F
- 8D847F
- 878280
Armonías de color
Complementario +180°
- C2937B
Potter’s Pink
- 72A8C0
≈ Moonstone Blue
Análogo -30° +30°
- C2937B
Potter’s Pink
- C58F8F
≈ Floral Tapestry
- B69A70
≈ Lark
Triádico +120° +240°
- C2937B
Potter’s Pink
- 75AD97
≈ Dusty Jade Green
- 9D99C7
≈ Majestic Violet
Complementario dividido +150° +210°
- C2937B
Potter’s Pink
- 6BACAE
≈ Poolrooms
- 86A1C9
≈ Anode
Tetrádico +90° +180° +270°
- C2937B
Potter’s Pink
- 8BA981
≈ Lounge Green
- 72A8C0
≈ Moonstone Blue
- B192BA
≈ Lavender Earl
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.70:1 · APCA Lc 52
Ag
AAASobre negro
WCAG 7.75:1 · APCA Lc 49
Mejor color de texto: #000000
WCAG 7.75:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmentos de código
CSS
:root {
--potter-s-pink: #c2937b;
--potter-s-pink-rgb: 194 147 123;
--potter-s-pink-oklch: oklch(0.702 0.066 48.3);
}
.element {
color: var(--potter-s-pink);
background-color: hsl(20 37% 62%);
border-color: oklch(0.702 0.066 48.3);
}Tailwind CSS v4
@theme {
--color-potter-s-pink: #c2937b;
--color-potter-s-pink-50: #fff0e5;
--color-potter-s-pink-100: #fbe2d5;
--color-potter-s-pink-200: #edcdbb;
--color-potter-s-pink-300: #d4ae99;
--color-potter-s-pink-400: #c0937c;
--color-potter-s-pink-500: #ab795f;
--color-potter-s-pink-600: #906751;
--color-potter-s-pink-700: #745240;
--color-potter-s-pink-800: #563b2f;
--color-potter-s-pink-900: #3c2920;
--color-potter-s-pink-950: #26160f;
}SCSS
$potter-s-pink: #c2937b;
$potter-s-pink-rgb: 194, 147, 123;
$potter-s-pink-light: mix(#fff, $potter-s-pink, 20%);
$potter-s-pink-dark: mix(#000, $potter-s-pink, 20%);
.element {
color: $potter-s-pink;
box-shadow: 0 0 0 2px rgba($potter-s-pink, 0.35);
}