이름 색상 · #F504C9
Mademoiselle Pink
Mademoiselle Pink은(는) #F504C9: rgb(245 4 201), hsl(311 97% 49%), oklch(0.657 0.286 339). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Pink mean? → · Mademoiselle Pink color name →
#F504C9
oklch(0.657 0.286 339)
색상 변환
- HEX
- #f504c9
- RGB
- rgb(245 4 201)
- HSL
- hsl(311 97% 49%)
- HWB
- hwb(311 2% 4%)
- OKLCH
- oklch(0.657 0.286 339)
- OKLab
- oklab(0.657 0.267 -0.102)
- CIE Lab
- lab(56.03 86.39 -36.75)
- LCH
- lch(56.03 93.88 337)
- CMYK
- cmyk(0% 98% 18% 4%)
틴트 · 셰이드 · 톤
틴트
- F941CF
- FD5FD5
- FF77DA
- FF8DE0
- FFA1E5
- FFB5EB
- FFC8F0
- FFDAF5
- FFEDFA
셰이드
- D503AE
- B60295
- 98017C
- 7B0164
- 5F014C
- 440036
- 2B0022
- 15000F
- 030002
톤
- EB2FC2
- E042BB
- D550B3
- CA5AAC
- BF63A5
- B46A9E
- A87196
- 9B778F
- 8E7C88
색 조화
보색 +180°
- F504C9
Mademoiselle Pink
- 00AC6F
≈ Secret Garden
유사색 -30° +30°
- F504C9
Mademoiselle Pink
- BD56FF
≈ Jacaranda Pink
- FF3072
≈ Office Neon Light
삼각 배색 +120° +240°
- F504C9
Mademoiselle Pink
- A79200
≈ Bark Sawdust
- 00A2C2
≈ Scuba Blue
분열 보색 +150° +210°
- F504C9
Mademoiselle Pink
- 6FA400
≈ Herbal Lift
- 00A7A0
≈ Jadestone
사각 배색 +90° +180° +270°
- F504C9
Mademoiselle Pink
- C97E00
≈ Bamboo Brown
- 00AC6F
≈ Secret Garden
- 0095FA
≈ Starfleet Blue
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.65:1 · APCA Lc 61
Ag
AA검은색 위
WCAG 5.74:1 · APCA Lc 40
가장 좋은 글자색: #000000
WCAG 5.74:1 (AA) · APCA Lc 40
Contrast pairs
코드 스니펫
CSS
:root {
--mademoiselle-pink: #f504c9;
--mademoiselle-pink-rgb: 245 4 201;
--mademoiselle-pink-oklch: oklch(0.657 0.286 339);
}
.element {
color: var(--mademoiselle-pink);
background-color: hsl(311 97% 49%);
border-color: oklch(0.657 0.286 339);
}Tailwind CSS v4
@theme {
--color-mademoiselle-pink: #f504c9;
--color-mademoiselle-pink-50: #ffd5ff;
--color-mademoiselle-pink-100: #ffc1ff;
--color-mademoiselle-pink-200: #ff9ff8;
--color-mademoiselle-pink-300: #ff70e2;
--color-mademoiselle-pink-400: #ff39d4;
--color-mademoiselle-pink-500: #ef00c2;
--color-mademoiselle-pink-600: #ca00a4;
--color-mademoiselle-pink-700: #a30083;
--color-mademoiselle-pink-800: #780065;
--color-mademoiselle-pink-900: #550047;
--color-mademoiselle-pink-950: #39002e;
}SCSS
$mademoiselle-pink: #f504c9;
$mademoiselle-pink-rgb: 245, 4, 201;
$mademoiselle-pink-light: mix(#fff, $mademoiselle-pink, 20%);
$mademoiselle-pink-dark: mix(#000, $mademoiselle-pink, 20%);
.element {
color: $mademoiselle-pink;
box-shadow: 0 0 0 2px rgba($mademoiselle-pink, 0.35);
}