Khroma는 개인이 선호하는 색상 팔레트를 구성할 수 있는 사이트입니다. 총 50가지의 선호하는 색상을 선택하고, AI가 사용자가 선호할만한 색상 팔레트 샘플을 제공합니다. 지금부터 한번 사용해보겠습니다.
50가지의 색상 선택
메인 화면에서 Generate 버튼을 누릅니다. 화면에 나타난 색상 중에 선호하는 색상 50가지를 선택하겠습니다.
50가지의 색상 선택이 완료됐으면, 화면 우측 상단의 훈련 시작 버튼을 누릅니다. 화면에서 훈련 진행도 및 정확도가 표시됩니다.
메뉴
팔레트 샘플이 완성되었으면 화면 좌측 상단에 활용할 수 있는 각종 메뉴가 나타납니다. 순서대로 Type, Poster, Gradient, Image, Palette, Favourties입니다.
Type
Type를 선택하고 각각의 항목 우측 상단에 마우스를 오버했을 때 색상 스왑, 즐겨 찾기(Favourites) 등록, 색상 정보 확인이 가능합니다.
색상 정보를 클릭하겠습니다. HEX와 RGB 코드를 확인할 수 있습니다. 앞으로 생성된 색상 팔레트 중에 본인이 선호하는 색상이 있다면, 색상 정보에서 제공된 HEX와 RGB 코드를 활용하시면 됩니다. Bias 값을 높이면 사용자가 선호하는 색상 위주로 팔레트가 제공되는 반면, Bias 값을 낮추면 좀 더 다양한 색상 팔레트가 나타납니다.
WCAG Ratio
WCAG Ratio는 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines)에서 정의하는 텍스트와 배경 색상 간의 명도 대비 비율을 의미합니다. 앞의 숫자가 밝은 색상, 뒤의 숫자가 어두운 색상을 의미합니다. 가독성과 접근성의 기준에 따라, 상기 색상 팔레트는 WCAG의 색상 기준에 부합하지 못합니다. (Fail)
- AA 기준: 표준 접근성, 일반 사용자와 색각 이상자를 위한 최소 요구치 (일반 텍스트 최소 4.5:1 / 큰 텍스트 최소 3:1)
- AAA 기준: 높은 접근성, 최대한의 가독성 목표 (일반 텍스트 최소 7:1 / 큰 텍스트 최소 4.5:1)
- 큰 텍스트: 볼드체로 14pt 이상, 또는 일반 글꼴로 18pt 이상
Poster
2색으로 구성된 패턴을 보여주는 메뉴입니다. 다음 이미지의 2가지 색은 AA Large 기준에 부합합니다.
 Poster |  Poster의 Details |
Gradient(그라데이션)
색상 그라데이션을 보여줍니다. 우측 상단 메뉴의 첫 번째 항목을 클릭하면 CSS 코드의 복사가 가능합니다. 블로그나 웹사이트 등에 해당 CSS 코드를 활용할 수 있습니다.
Image & Palette
Image 메뉴에서는 텍스트가 아닌 특정 이미지를 넣어 배경과의 대비를 확인할 수 있습니다. Palette 항목에서는 앞서 선택한 50가지 색상을 기준으로 4가지 색상으로 구성된 팔레트를 제공합니다.
 Image |  Palette |
설정
Khroma 우측 상단의 톱니바퀴 모양 아이콘을 클릭하면 설정을 조정할 수 있습니다. 다음 항목의 조정이 가능합니다.
- 이미지 업로드: 사용자가 직접 이미지를 업로드하여, Image 항목에 반영 (ex. 첨부 이미지의 일론 머스크)
- 좀 더 명확한 Gradient: 흐릿한 그라데이션을 차단
- WCAG를 준수하는 색채 조합: WCAG Fail이 뜨는 색채 조합을 차단
- 색상 편집: 50가지 색상을 다시 선택
- 데이터 저장: Json 파일 형태로 사용자의 색채 조합을 저장
후기
사용자의 취향을 기준으로 색상 및 색상 팔레트를 구성하고, CSS 코드 & Json 파일 형태로 다른 사이트에서도 해당 색채 조합을 이용할 수 있습니다. 선호하는 특정 색상을 기준으로 사이트의 디자인을 구성하고 싶다면 Khroma를 한번 활용해 보시기를 바랍니다.