배색 아이디어를 실제 웹사이트 색상으로 완성하기

브랜드 사진이나 참고 이미지가 있다면 특정 위치의 색상은 이미지 색상 추출기로 고르세요. 이미지 전체의 주요 색상을 정리하려면 이미지 색상 팔레트 추출기를 사용하면 됩니다. 추출한 팔레트는 사진에 쓰인 색상을 보여 주며, 본문이나 버튼에 쓸 색상까지 자동으로 결정하지는 않습니다.

카페 홈페이지라면 사진 속 크림색을 배경으로, 커피색을 강조색으로, 차분한 녹색을 장식으로 배정할 수 있습니다. 색상을 더하기 전에 용도를 정하면 시선을 한곳에 모으기 쉽습니다. 기준 이미지가 없다면 무작위 팔레트에서 마음에 드는 색상 하나를 남기고 시작하세요.

5색 팔레트 생성기에서는 각 색상을 잠근 뒤 잠기지 않은 색상만 다시 생성할 수 있습니다. 배색 모드를 선택하면 현재 순서에서 가장 앞에 있는 잠긴 색상이 새 색상의 기준이 됩니다. 다른 잠긴 색상은 선택한 조화 관계와 맞지 않아도 기존 값이 유지됩니다.

브랜드 색상을 먼저 고정하고 어울리는 배경과 보조 색상을 비교해 보세요. 잠긴 색상의 순서를 바꾸면 생성 기준도 달라질 수 있습니다. 다섯 칸이 모두 잠겨 있다면 한 칸 이상을 풀어야 새로운 결과가 나옵니다. 색상의 조화는 탐색 방향일 뿐, 글자의 가독성을 확인한 결과는 아닙니다.

1. 가장 중요한 주 색상을 고르고 잠급니다.
2. 배색 모드를 선택한 뒤 잠기지 않은 색상만 다시 생성합니다.
3. 남긴 색상에 배경, 영역, 본문, 강조, 장식 등의 역할을 지정합니다.

색상 변형 생성기는 하나의 기준색에 흰색이나 검은색을 섞은 색상과 투명도 변형을 만듭니다. 카드의 옅은 배경이나 버튼의 짙은 상태색을 찾을 때 유용합니다. 기준색에 대한 검은 글자와 흰 글자의 대비도 표시하지만, 다양한 글자색 후보를 찾는 기능과는 구분해서 사용하세요.

반투명 색상은 뒤에 놓인 배경과 합쳐지므로 실제 페이지에서 확인해야 합니다. 디자인 파일과 CSS에 다른 색상 형식이 필요하면 색상 코드 변환기로 HEX, RGB, HSL 값을 정리하세요. 한 화면에서 본 색상만 기억하기보다 최종 값을 기록하는 편이 정확하게 전달할 수 있습니다.

읽기 좋은 글자색 도구는 입력한 단색 배경에 맞는 전경색을 제안합니다. 목표는 일반 글자 AA 4.5:1, 일반 글자 AAA 7:1, 큰 글자 AA 3:1입니다. 이미 정한 두 색상은 색상 대비 검사기로 수치를 확인하세요. 3:1은 큰 글자의 AA 기준이며 일반 본문에 적용할 기준이 아닙니다.

상품 설명이나 입력 양식은 일반 글자 기준으로 평가하고 실제 글꼴로 읽어 보세요. 이어서 링크, 키보드 초점 표시, 오류 메시지와 상호작용 상태의 가독성을 확인하세요. 기준에 관한 자세한 내용은 아래 W3C 자료에서 확인할 수 있습니다.

무작위 그라디언트 생성기는 두 가지 또는 세 가지 색상으로 CSS 선형 그라디언트를 만듭니다. 색상과 각도를 편집한 다음 CSS를 복사하거나 파일로 다운로드하세요. 먼저 두 색상으로 시도하고 중간 색상을 직접 지정할 필요가 있을 때 세 번째 색상을 더하면 조절하기 쉽습니다.

단색에서 대비를 충족한 글자색도 그라디언트 전체에서는 잘 보이지 않을 수 있습니다. 실제 글자 아래의 배경을 확인하고 모바일에서 줄바꿈이나 잘림으로 위치가 달라지는 경우도 살펴보세요. 일정한 대비를 유지하기 어렵다면 글자는 단색 패널에 놓고 주변 장식에 그라디언트를 사용하는 방법이 있습니다.

색상 팔레트 미리보기는 다섯 색상을 페이지 배경, 콘텐츠 영역 배경, 글자, 주요 동작, 주요 동작 위 글자에 배정합니다. 색상표에서 잘 어울려도 인터페이스 역할에는 맞지 않을 수 있습니다. 예시 본문과 버튼을 확인하며 역할별 색상을 조정하세요.

5색 팔레트 생성기에서 미리보기 동작을 직접 선택하면 현재 다섯 색상이 배경, 콘텐츠 영역, 글자, 주요 동작, 버튼 글자 순서로 전달됩니다. 일반 링크로 미리보기를 열면 생성기의 팔레트가 자동 전달되지 않습니다. 색상은 현재 브라우저 탭 안에서 전달되며 URL에 들어가지 않습니다.

미리보기에서 CSS 사용자 정의 속성을 복사해 자신의 스타일시트에서 해당 역할에 연결하세요. 다섯 역할 색상은 구현의 출발점이며 전체 테마나 접근성 검사를 자동 완성하지 않습니다. 게시 전에 본문, 버튼 글자, 호버, 키보드 포커스와 실제 배경 조합을 확인하세요.

색상별 역할과 최종 코드, 검사한 글자색·배경색 조합을 함께 기록하세요. HEX 값만 나열하기보다 “페이지 배경”, “주요 동작 버튼”처럼 용도를 붙이면 유지보수가 쉬워집니다. 그라디언트는 각도와 색상 순서도 중요하므로 전체 CSS를 별도로 저장합니다.

공개 전에는 실제 문구로 긴 본문, 마우스를 올린 상태, 키보드 초점, 지원하는 경우 밝은 화면과 어두운 화면을 확인하세요. 배경을 바꾸거나 투명도를 추가하면 이전 대비 검사 결과가 달라질 수 있습니다. 글자색이나 배경색 중 하나라도 수정했다면 최종 조합을 다시 검사하세요.