색상 변환
#ca4e4e
≈ Chestnut Rose
색상 변형
이 섹션은 선택한 색상에 순백색을 더한 틴트(명색)와 순흑색을 더한 셰이드(암색)를 10% 단위로 정밀하게 생성하는 것을 목표로 합니다.
전문가 팁: 호버 상태와 그림자에는 음영을, 하이라이트와 배경에는 색조를 사용합니다.
셰이드
기본 색상에 검정색을 추가하여 더 어두운 변형을 만들 수 있습니다.
틴트
기본 색상에 흰색을 추가하여 더 밝은 색상을 만들 수 있습니다.
일반적인 사용 사례
- • UI 구성 요소 상태(호버, 활성, 비활성화)
- • 그림자와 하이라이트로 깊이 만들기
- • 일관된 컬러 시스템 구축
디자인 시스템 팁
이러한 변형은 일관성 있는 색상 팔레트의 기초를 형성합니다. 전체 프로젝트에서 일관성을 유지하려면 내보내세요.
색상 조합
각각의 색상 조화는 고유한 분위기를 자아냅니다. 조화로운 색상 조합을 참고하여 어울리는 색상을 찾아보세요.
사용 방법
색상을 클릭하면 해당 16진수 값을 복사할 수 있습니다. 이러한 조합은 시각적 조화를 이루는 것으로 수학적으로 입증되었습니다.
중요한 이유
색상 조화는 균형을 이루고 디자인에 특정 감정을 불러일으킵니다.
보색
색상환에서 정반대에 위치한 색(색상차 180도)의 조합입니다. 대비가 매우 높습니다.
분할 보색
기준색과 그 보색의 양옆에 있는 두 가지 색(보색에서 ±30도)을 조합한 것입니다. 보색만큼 대담하면서도 더 다채로운 표현이 가능합니다.
삼색 배색
색상환에서 120도 간격으로 균등하게 배치된 세 가지 색상의 조합입니다. 한 가지 색을 주색으로 사용하고 나머지 두 색을 강조색으로 사용하는 것이 가장 좋습니다.
유사색
색상환에서 인접한 세 가지 색상(색상차 30도)으로, 밝기와 채도가 동일한 조합입니다. 부드럽고 안정적인 느낌을 줍니다.
단색 배색
동일한 색상에 밝기 값만 ±50%로 조절한 세 가지 색상의 조합입니다. 미묘하고 세련된 느낌을 줍니다.
사각형 배색
60도 간격으로 떨어진 두 쌍의 보색 조합입니다.
색 이론 원리
잔액
하나의 주된 색상을 사용하고 보조 색상으로 보조를 주며 악센트는 아껴서 사용합니다.
대비
가독성과 접근성을 위해 충분한 대비를 확보하세요.
하모니
색상은 서로 조화를 이루어 통일된 시각적 경험을 만들어야 합니다.
색상 대비 검사기
색상 조합을 테스트하여 텍스트 가독성을 위한 WCAG 접근성 표준을 충족하는지 확인합니다.
텍스트 색상
배경색
대비
WCAG 표준
모두가 천재입니다. 하지만 나무 타기 능력으로 물고기를 판단한다면, 물고기는 평생 자신이 어리석다고 믿으며 살아갈 것입니다.