이름 색상 · #333355
Haunted Dreams
Haunted Dreams은(는) #333355: rgb(51 51 85), hsl(240 25% 27%), oklch(0.338 0.059 282.8). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Haunted Dreams color name →
#333355
oklch(0.338 0.059 282.8)
색상 변환
- HEX
- #333355
- RGB
- rgb(51 51 85)
- HSL
- hsl(240 25% 27%)
- HWB
- hwb(240 20% 67%)
- OKLCH
- oklch(0.338 0.059 282.8)
- OKLab
- oklab(0.338 0.013 -0.058)
- CIE Lab
- lab(22.52 7.33 -20.86)
- LCH
- lch(22.52 22.11 289.4)
- CMYK
- cmyk(40% 40% 0% 67%)
틴트 · 셰이드 · 톤
틴트
- 444565
- 575875
- 6A6B86
- 7D7F96
- 9293A7
- A7A8B8
- BCBDCA
- D2D3DB
- E8E9ED
셰이드
- 2B2B49
- 23233D
- 1C1C31
- 141426
- 0D0D1C
- 070711
- 030308
- 010102
- 000000
톤
- 3A3A5A
- 41425E
- 484962
- 505167
- 58596B
- 5F606F
- 676874
- 707078
- 78787C
색 조화
보색 +180°
- 333355
Haunted Dreams
- 3D380F
≈ Camouflage
유사색 -30° +30°
- 333355
Haunted Dreams
- 203955
≈ Gibraltar Sea
- 422E4D
≈ Jagger
삼각 배색 +120° +240°
- 333355
Haunted Dreams
- 512C1E
≈ Boson Brown
- 14412E
≈ Mizukaze Green
분열 보색 +150° +210°
- 333355
Haunted Dreams
- 4A3210
≈ Bavarian Sweet Mustard
- 2B3E1D
≈ Turtle Skin
사각 배색 +90° +180° +270°
- 333355
Haunted Dreams
- 512A2F
≈ Purple Kite
- 3D380F
≈ Camouflage
- 00413F
≈ Rich Black
대비 및 접근성
Ag
AAA흰색 위
WCAG 12.03:1 · APCA Lc 97
Ag
Fail검은색 위
WCAG 1.74:1 · APCA Lc 0
가장 좋은 글자색: #FFFFFF
WCAG 12.03:1 (AAA) · APCA Lc 97
Contrast pairs
코드 스니펫
CSS
:root {
--haunted-dreams: #333355;
--haunted-dreams-rgb: 51 51 85;
--haunted-dreams-oklch: oklch(0.338 0.059 282.8);
}
.element {
color: var(--haunted-dreams);
background-color: hsl(240 25% 27%);
border-color: oklch(0.338 0.059 282.8);
}Tailwind CSS v4
@theme {
--color-haunted-dreams: #333355;
--color-haunted-dreams-50: #f3f3ff;
--color-haunted-dreams-100: #e5e6fc;
--color-haunted-dreams-200: #d1d1ed;
--color-haunted-dreams-300: #b3b4d5;
--color-haunted-dreams-400: #999bc1;
--color-haunted-dreams-500: #8082ad;
--color-haunted-dreams-600: #6c6e92;
--color-haunted-dreams-700: #575875;
--color-haunted-dreams-800: #3e4057;
--color-haunted-dreams-900: #2b2c3d;
--color-haunted-dreams-950: #181926;
}SCSS
$haunted-dreams: #333355;
$haunted-dreams-rgb: 51, 51, 85;
$haunted-dreams-light: mix(#fff, $haunted-dreams, 20%);
$haunted-dreams-dark: mix(#000, $haunted-dreams, 20%);
.element {
color: $haunted-dreams;
box-shadow: 0 0 0 2px rgba($haunted-dreams, 0.35);
}