이름 색상 · #FD5956
Grapefruit
Grapefruit은(는) #FD5956: rgb(253 89 86), hsl(1 98% 66%), oklch(0.684 0.2 25). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Red mean? → · Grapefruit color name →
#FD5956
oklch(0.684 0.2 25)
색상 변환
- HEX
- #fd5956
- RGB
- rgb(253 89 86)
- HSL
- hsl(1 98% 66%)
- HWB
- hwb(1 34% 1%)
- OKLCH
- oklch(0.684 0.2 25)
- OKLab
- oklab(0.684 0.181 0.085)
- CIE Lab
- lab(61.29 63.14 37.76)
- LCH
- lch(61.29 73.57 30.9)
- CMYK
- cmyk(0% 65% 66% 1%)
틴트 · 셰이드 · 톤
틴트
- FF6D67
- FF8078
- FF9189
- FFA299
- FFB2AA
- FFC1BB
- FFD1CC
- FFE0DD
- FFF0EE
셰이드
- DC4C4A
- BC403E
- 9D3432
- 7F2827
- 621D1C
- 471312
- 2D0908
- 160302
- 030000
톤
- F2605B
- E66660
- DA6B65
- CE7069
- C2746D
- B67771
- A97A75
- 9C7C79
- 8E7E7D
색 조화
보색 +180°
- FD5956
Grapefruit
- 00ADBC
≈ Placid Sea
유사색 -30° +30°
- FD5956
Grapefruit
- F2589F
≈ Oleander Pink
- E67700
≈ First of Fall
삼각 배색 +120° +240°
- FD5956
Grapefruit
- 27B73E
≈ Charming Nature
- 6694FF
≈ Blue Chaos
분열 보색 +150° +210°
- FD5956
Grapefruit
- 00B395
≈ Aloha
- 00A6E5
≈ Huelveño Horizon
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.11:1 · APCA Lc 57
Ag
AA검은색 위
WCAG 6.73:1 · APCA Lc 45
가장 좋은 글자색: #000000
WCAG 6.73:1 (AA) · APCA Lc 45
Contrast pairs
코드 스니펫
CSS
:root {
--grapefruit: #fd5956;
--grapefruit-rgb: 253 89 86;
--grapefruit-oklch: oklch(0.684 0.2 25);
}
.element {
color: var(--grapefruit);
background-color: hsl(1 98% 66%);
border-color: oklch(0.684 0.2 25);
}Tailwind CSS v4
@theme {
--color-grapefruit: #fd5956;
--color-grapefruit-50: #ffe0d6;
--color-grapefruit-100: #ffcfc4;
--color-grapefruit-200: #ffb2a5;
--color-grapefruit-300: #ff8b7e;
--color-grapefruit-400: #ff645f;
--color-grapefruit-500: #ee343a;
--color-grapefruit-600: #c92f32;
--color-grapefruit-700: #a22628;
--color-grapefruit-800: #79191f;
--color-grapefruit-900: #551014;
--color-grapefruit-950: #390206;
}SCSS
$grapefruit: #fd5956;
$grapefruit-rgb: 253, 89, 86;
$grapefruit-light: mix(#fff, $grapefruit, 20%);
$grapefruit-dark: mix(#000, $grapefruit, 20%);
.element {
color: $grapefruit;
box-shadow: 0 0 0 2px rgba($grapefruit, 0.35);
}