이름 색상 · #587366
Hilltop
Hilltop은(는) #587366: rgb(88 115 102), hsl(151 13% 40%), oklch(0.53 0.038 164.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Green mean? → · Hilltop color name →
#587366
oklch(0.53 0.038 164.1)
색상 변환
- HEX
- #587366
- RGB
- rgb(88 115 102)
- HSL
- hsl(151 13% 40%)
- HWB
- hwb(151 35% 55%)
- OKLCH
- oklch(0.53 0.038 164.1)
- OKLab
- oklab(0.53 -0.036 0.01)
- CIE Lab
- lab(46 -12.44 3.84)
- LCH
- lch(46 13.02 162.9)
- CMYK
- cmyk(23% 0% 11% 55%)
틴트 · 셰이드 · 톤
틴트
- 688074
- 778D83
- 879B91
- 98A9A0
- A8B7AF
- B9C5BF
- CAD3CF
- DCE2DF
- EDF0EF
셰이드
- 4B6358
- 3F544A
- 33453C
- 28362F
- 1D2823
- 121B17
- 090F0C
- 030504
- 000100
톤
- 5C7469
- 60766B
- 64776E
- 687870
- 6C7A73
- 707B76
- 747C78
- 787D7B
- 7C7F7D
색 조화
보색 +180°
- 587366
Hilltop
- 7C6371
≈ Ephemera
유사색 -30° +30°
- 587366
Hilltop
- 63715B
≈ Midnight Garden
- 527372
≈ Evening Emerald
삼각 배색 +120° +240°
- 587366
Hilltop
- 696981
≈ Hyacinth Arbour
- 7F655A
≈ Almond Truffle
분열 보색 +150° +210°
- 587366
Hilltop
- 74667B
≈ Decadence
- 806365
≈ Amazing Amethyst
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
AA흰색 위
WCAG 5.17:1 · APCA Lc 76
Ag
Fail검은색 위
WCAG 4.05:1 · APCA Lc 26
가장 좋은 글자색: #FFFFFF
WCAG 5.17:1 (AA) · APCA Lc 76
Contrast pairs
코드 스니펫
CSS
:root {
--hilltop: #587366;
--hilltop-rgb: 88 115 102;
--hilltop-oklch: oklch(0.53 0.038 164.1);
}
.element {
color: var(--hilltop);
background-color: hsl(151 13% 40%);
border-color: oklch(0.53 0.038 164.1);
}Tailwind CSS v4
@theme {
--color-hilltop: #587366;
--color-hilltop-50: #ecf9f3;
--color-hilltop-100: #ddece5;
--color-hilltop-200: #c6dad0;
--color-hilltop-300: #a6beb3;
--color-hilltop-400: #8ba698;
--color-hilltop-500: #708e80;
--color-hilltop-600: #5f786c;
--color-hilltop-700: #4c6056;
--color-hilltop-800: #37473e;
--color-hilltop-900: #26312b;
--color-hilltop-950: #141d18;
}SCSS
$hilltop: #587366;
$hilltop-rgb: 88, 115, 102;
$hilltop-light: mix(#fff, $hilltop, 20%);
$hilltop-dark: mix(#000, $hilltop, 20%);
.element {
color: $hilltop;
box-shadow: 0 0 0 2px rgba($hilltop, 0.35);
}