이름 색상 · #336172
Atlantis
Atlantis은(는) #336172: rgb(51 97 114), hsl(196 38% 32%), oklch(0.467 0.057 224.3). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Cyan mean? → · Atlantis color name →
#336172
oklch(0.467 0.057 224.3)
색상 변환
- HEX
- #336172
- RGB
- rgb(51 97 114)
- HSL
- hsl(196 38% 32%)
- HWB
- hwb(196 20% 55%)
- OKLCH
- oklch(0.467 0.057 224.3)
- OKLab
- oklab(0.467 -0.041 -0.04)
- CIE Lab
- lab(38.42 -12.45 -14.8)
- LCH
- lch(38.42 19.34 229.9)
- CMYK
- cmyk(55% 15% 0% 55%)
틴트 · 셰이드 · 톤
틴트
- 47707F
- 5B7F8D
- 6E8E9B
- 829DA8
- 96ADB6
- ABBDC5
- BFCDD3
- D4DEE1
- E9EEF0
셰이드
- 2B5362
- 234653
- 1C3944
- 142D36
- 0D2128
- 07151B
- 030B0E
- 010304
- 000001
톤
- 3C6474
- 446775
- 4C6A76
- 546E78
- 5B7179
- 63747B
- 6A777C
- 717A7D
- 797D7F
색 조화
보색 +180°
- 336172
Atlantis
- 75503F
≈ Friar’s Brown
유사색 -30° +30°
- 336172
Atlantis
- 2E6463
≈ Strong Sage
- 435C7A
≈ Newburyport
삼각 배색 +120° +240°
- 336172
Atlantis
- 714D62
≈ Passionate
- 5F5C35
≈ Eastern Bamboo
분열 보색 +150° +210°
- 336172
Atlantis
- 774D50
≈ Madder
- 6D5534
≈ Ancient Olive
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
AA흰색 위
WCAG 6.78:1 · APCA Lc 83
Ag
Fail검은색 위
WCAG 3.09:1 · APCA Lc 19
가장 좋은 글자색: #FFFFFF
WCAG 6.78:1 (AA) · APCA Lc 83
Contrast pairs
코드 스니펫
CSS
:root {
--atlantis: #336172;
--atlantis-rgb: 51 97 114;
--atlantis-oklch: oklch(0.467 0.057 224.3);
}
.element {
color: var(--atlantis);
background-color: hsl(196 38% 32%);
border-color: oklch(0.467 0.057 224.3);
}Tailwind CSS v4
@theme {
--color-atlantis: #336172;
--color-atlantis-50: #e5f9ff;
--color-atlantis-100: #d5ecf7;
--color-atlantis-200: #bbdae7;
--color-atlantis-300: #99bece;
--color-atlantis-400: #79a6b8;
--color-atlantis-500: #5b8fa3;
--color-atlantis-600: #4d7989;
--color-atlantis-700: #3d616e;
--color-atlantis-800: #2b4751;
--color-atlantis-900: #1d3138;
--color-atlantis-950: #0d1d23;
}SCSS
$atlantis: #336172;
$atlantis-rgb: 51, 97, 114;
$atlantis-light: mix(#fff, $atlantis, 20%);
$atlantis-dark: mix(#000, $atlantis, 20%);
.element {
color: $atlantis;
box-shadow: 0 0 0 2px rgba($atlantis, 0.35);
}