이름 색상 · #4F7694

Beach View

Beach View은(는) #4F7694: rgb(79 118 148), hsl(206 30% 45%), oklch(0.549 0.064 242.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Blue mean? → · Beach View color name →

#4F7694

oklch(0.549 0.064 242.4)

색상 변환

HEX: #4f7694
RGB: rgb(79 118 148)
HSL: hsl(206 30% 45%)
HWB: hwb(206 31% 42%)
OKLCH: oklch(0.549 0.064 242.4)
OKLab: oklab(0.549 -0.03 -0.057)
CIE Lab: lab(47.65 -7.72 -20.93)
LCH: lch(47.65 22.31 249.7)
CMYK: cmyk(47% 20% 0% 42%)

틴트 · 셰이드 · 톤

틴트

60839E
7190A9
829EB4
93ABBE
A5B9C9
B6C6D4
C8D4DE
DAE2E9
ECF1F4

셰이드

446680
38566D
2E475A
233848
192936
101C26
070F16
020508
000101

톤

547792
5A7890
5F798E
647A8C
697B8A
6D7C88
727D86
777E84
7B7F82

색 조화

보색 +180°

4F7694
Beach View
8D6949
≈ Slippery Stone

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 4.82:1 · APCA Lc 73

검은색 위

WCAG 4.35:1 · APCA Lc 28

Fail

가장 좋은 글자색: #FFFFFF

WCAG 4.82:1 (AA) · APCA Lc 73

Contrast pairs

코드 스니펫

CSS

:root {
  --beach-view: #4f7694;
  --beach-view-rgb: 79 118 148;
  --beach-view-oklch: oklch(0.549 0.064 242.4);
}

.element {
  color: var(--beach-view);
  background-color: hsl(206 30% 45%);
  border-color: oklch(0.549 0.064 242.4);
}

Tailwind CSS v4

@theme {
  --color-beach-view: #4f7694;
  --color-beach-view-50: #e6f8ff;
  --color-beach-view-100: #d7ebfc;
  --color-beach-view-200: #bed8ee;
  --color-beach-view-300: #9cbcd7;
  --color-beach-view-400: #7da4c2;
  --color-beach-view-500: #5f8cae;
  --color-beach-view-600: #517693;
  --color-beach-view-700: #415f76;
  --color-beach-view-800: #2d4557;
  --color-beach-view-900: #1f303c;
  --color-beach-view-950: #0e1c26;
}

SCSS

$beach-view: #4f7694;
$beach-view-rgb: 79, 118, 148;
$beach-view-light: mix(#fff, $beach-view, 20%);
$beach-view-dark: mix(#000, $beach-view, 20%);

.element {
  color: $beach-view;
  box-shadow: 0 0 0 2px rgba($beach-view, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API