Nazwany kolor · #FD6C9E
French Pink
French Pink to #FD6C9E: rgb(253 108 158), hsl(339 97% 71%), oklch(0.722 0.182 1.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · French Pink color name →
#FD6C9E
oklch(0.722 0.182 1.2)
Konwersje koloru
- HEX
- #fd6c9e
- RGB
- rgb(253 108 158)
- HSL
- hsl(339 97% 71%)
- HWB
- hwb(339 42% 1%)
- OKLCH
- oklch(0.722 0.182 1.2)
- OKLab
- oklab(0.722 0.182 0.004)
- CIE Lab
- lab(65.5 59.57 2.28)
- LCH
- lch(65.5 59.62 2.2)
- CMYK
- cmyk(0% 57% 38% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF7DA7
- FF8CB1
- FF9BBA
- FFAAC4
- FFB9CD
- FFC7D7
- FFD5E1
- FFE3EB
- FFF1F5
Odcienie ciemniejsze
- DC5D89
- BC4E74
- 9D4060
- 7F324D
- 62253A
- 471929
- 2D0D18
- 160409
- 030001
Tony
- F1709B
- E57398
- D97695
- CD7892
- C17B8F
- B57C8C
- A87E89
- 9B7F86
- 8E7F83
Harmonie kolorów
Komplementarna +180°
- FD6C9E
French Pink
- 00BFAA
≈ Turquoise
Analogowa -30° +30°
- FD6C9E
French Pink
- E475D9
≈ Hibiscus Pop
- FF755E
≈ Peachy Pinky
Triada +120° +240°
- FD6C9E
French Pink
- 96B400
≈ Salty Thyme
- 24AFFF
≈ Fantasy Console Sky
Komplementarna rozszczepiona +150° +210°
- FD6C9E
French Pink
- 27C466
≈ Algal Fuel
- 00BAD2
≈ Holiday Blue
Tetrada +90° +180° +270°
- FD6C9E
French Pink
- C8A000
≈ Molten Bronze
- 00BFAA
≈ Turquoise
- 859EFF
≈ Periwinkle Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.68:1 · APCA Lc 51
Ag
AAANa czerni
WCAG 7.81:1 · APCA Lc 50
Najlepszy kolor tekstu: #000000
WCAG 7.81:1 (AAA) · APCA Lc 50
Contrast pairs
Fragmenty kodu
CSS
:root {
--french-pink: #fd6c9e;
--french-pink-rgb: 253 108 158;
--french-pink-oklch: oklch(0.722 0.182 1.2);
}
.element {
color: var(--french-pink);
background-color: hsl(339 97% 71%);
border-color: oklch(0.722 0.182 1.2);
}Tailwind CSS v4
@theme {
--color-french-pink: #fd6c9e;
--color-french-pink-50: #ffe0f0;
--color-french-pink-100: #ffcfe2;
--color-french-pink-200: #ffb3cc;
--color-french-pink-300: #ff8dae;
--color-french-pink-400: #f16998;
--color-french-pink-500: #df407e;
--color-french-pink-600: #bd386b;
--color-french-pink-700: #982d56;
--color-french-pink-800: #711f41;
--color-french-pink-900: #50152d;
--color-french-pink-950: #34051a;
}SCSS
$french-pink: #fd6c9e;
$french-pink-rgb: 253, 108, 158;
$french-pink-light: mix(#fff, $french-pink, 20%);
$french-pink-dark: mix(#000, $french-pink, 20%);
.element {
color: $french-pink;
box-shadow: 0 0 0 2px rgba($french-pink, 0.35);
}