이름 색상 · #FD4659
Watermelon
Watermelon은(는) #FD4659: rgb(253 70 89), hsl(354 98% 63%), oklch(0.665 0.218 20). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Red mean? → · Watermelon color name →
#FD4659
oklch(0.665 0.218 20)
색상 변환
- HEX
- #fd4659
- RGB
- rgb(253 70 89)
- HSL
- hsl(354 98% 63%)
- HWB
- hwb(354 27% 1%)
- OKLCH
- oklch(0.665 0.218 20)
- OKLab
- oklab(0.665 0.205 0.074)
- CIE Lab
- lab(58.84 69.86 33.13)
- LCH
- lch(58.84 77.32 25.4)
- CMYK
- cmyk(0% 72% 65% 1%)
틴트 · 셰이드 · 톤
틴트
- FF5F69
- FF747A
- FF878A
- FF9A9A
- FFABAB
- FFBCBB
- FFCDCC
- FFDEDD
- FFEFEE
셰이드
- DC3C4C
- BC3240
- 9D2834
- 7F1E28
- 62151D
- 470D13
- 2D0509
- 160203
- 030000
톤
- F2515E
- E65A62
- DB6266
- CF686A
- C36D6E
- B77272
- AA7676
- 9D7A79
- 8F7D7D
색 조화
보색 +180°
- FD4659
Watermelon
- 00A8AF
≈ Blue Bolero
유사색 -30° +30°
- FD4659
Watermelon
- EE49A6
≈ Major Magenta
- E56C00
≈ Accent Orange
삼각 배색 +120° +240°
- FD4659
Watermelon
- 36B100
≈ Pikkoro Green
- 4E90FF
≈ Polar Glow
분열 보색 +150° +210°
- FD4659
Watermelon
- 00AD87
≈ Herbal
- 00A1D5
≈ Blue Damselfly
사각 배색 +90° +180° +270°
- FD4659
Watermelon
- 9A9A00
≈ Papyrus
- 00A8AF
≈ Blue Bolero
- 9579FF
≈ Forgotten Purple
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.38:1 · APCA Lc 60
Ag
AA검은색 위
WCAG 6.19:1 · APCA Lc 42
가장 좋은 글자색: #000000
WCAG 6.19:1 (AA) · APCA Lc 42
Contrast pairs
코드 스니펫
CSS
:root {
--watermelon: #fd4659;
--watermelon-rgb: 253 70 89;
--watermelon-oklch: oklch(0.665 0.218 20);
}
.element {
color: var(--watermelon);
background-color: hsl(354 98% 63%);
border-color: oklch(0.665 0.218 20);
}Tailwind CSS v4
@theme {
--color-watermelon: #fd4659;
--color-watermelon-50: #ffddd9;
--color-watermelon-100: #ffcbc7;
--color-watermelon-200: #ffadaa;
--color-watermelon-300: #ff8484;
--color-watermelon-400: #ff5967;
--color-watermelon-500: #f51a45;
--color-watermelon-600: #cf1d3b;
--color-watermelon-700: #a6182f;
--color-watermelon-800: #7c0e24;
--color-watermelon-900: #580918;
--color-watermelon-950: #3b0009;
}SCSS
$watermelon: #fd4659;
$watermelon-rgb: 253, 70, 89;
$watermelon-light: mix(#fff, $watermelon, 20%);
$watermelon-dark: mix(#000, $watermelon, 20%);
.element {
color: $watermelon;
box-shadow: 0 0 0 2px rgba($watermelon, 0.35);
}