색상 가이드
색상 코드부터 배색 이론까지 — 디자이너와 개발자가
색을 더 정확하게 다루도록 돕는 글 모음입니다.
색은 단순히 "예쁜 것"을 넘어, 정보를 전달하고 브랜드를 각인시키며 사용자의 행동을 이끄는 도구입니다. 같은 빨강이라도 코드로 정확히 표기하고, 배경과의 대비를 따지고, 다른 색과 조화시키는 방법을 알면 결과물의 완성도가 달라집니다. 아래 가이드는 화면에서 색을 추출한 다음 그 색을 제대로 활용하는 데 필요한 핵심 지식을 정리한 것입니다.
가이드 목록
HEX·RGB·HSL 색상 코드 완벽 가이드
세 가지 색상 표기법의 차이와 변환 원리, 언제 무엇을 써야 하는지 정리했습니다.
웹 접근성을 위한 색상 대비(WCAG)
명암비 4.5:1의 의미와 계산법, 누구나 읽기 쉬운 색 조합을 만드는 방법.
브랜드 컬러 팔레트 만드는 법
기본·보조·강조·중립색으로 일관된 컬러 시스템을 구성하는 실전 절차.
색의 심리학
빨강·파랑·초록 등 색이 사용자에게 주는 인상과 맥락에 따른 활용법.
색상 조화 이론 — 보색·유사색·삼각 배색
색상환을 이용해 어울리는 색 조합을 체계적으로 고르는 다섯 가지 배색법.
색상 추출 도구로 디자인 워크플로 만들기
레퍼런스에서 색을 추출해 팔레트로 정리하고 코드에 적용하는 빠른 흐름.
색상 추출 도구는 어떻게 작동할까
EyeDropper API와 캔버스 픽셀 읽기, 색조 팔레트 생성 로직까지 기술 원리를 설명합니다.
먼저 도구부터 써보세요
이론을 읽기 전에 직접 색을 뽑아 보면 이해가 빠릅니다. 화면 색상 추출 도구로 화면이나 이미지에서 원하는 색의 HEX·RGB·HSL 코드를 즉시 확인하고, 이 가이드의 내용을 바로 적용해 보세요.