Ai Colors

핵심 흐름은 의도적으로 짧다. 분위기를 적고 색을 받는다. AIColors는 문장의 어조와 장면을 읽고 5~8색 팔레트를 이름과 짧은 설명과 함께 돌려준다. 이 이름이 생각보다 쓸모 있다. 고객과 이야기할 어휘가 생기므로 논의가 방향에 머문다. 아직 아무도 떠올리지 못하는 색 코드 숫자로 내려가지 않는다.

견본은 하나씩, 팔레트는 통째로 복사된다. Figma에 붙이거나 스타일시트에 남기거나 동료에게 넘기는 일상 작업은 이걸로 충분하다. 스크린샷으로는 부족한 경우, 예를 들어 슬라이드나 제안서 PDF에는 PNG 내보내기를 쓴다. Figma 플러그인도 디자인 토큰 내보내기도 없으니 마지막 단계는 손으로 처리한다.

변환기는 HEX, RGB, HSL, HSV, CMYK, OKLCH를 읽고 쓴다. 최근 작업에서 중요한 것은 OKLCH다. 색상이 달라져도 밝기 인지가 고르게 유지되어 팔레트 단계가 더 정돈되어 보인다. 디자인 시스템이 이미 최신 CSS 색 문법을 쓴다면 다른 계산기를 오갈 필요가 없다. 같은 값이 그라디언트 도구로 이어진다.

검사기는 WCAG 2.2 비율과 APCA 점수를 함께 보여 준다. 두 방식은 자주 결론이 갈리므로 같이 보는 편이 유용하다. WCAG는 준수 여부에 답하고, APCA는 해당 크기와 굵기에서 글자가 실제로 어떻게 보이는지에 가깝다. 검사만 하고 고치지는 않으니 어떤 색을 바꿀지는 사용자가 정한다.

이미지를 올리면 추출기가 주요 색을 나열한다. 처리는 브라우저에서 이루어져 아직 공개되지 않은 제품 사진을 다룰 때 의미가 있다. 이어서 미리보기가 팔레트를 레이아웃에 올린다. 배경, 본문, 강조색으로 쓰인 모습을 볼 수 있고, 네모 다섯 개를 나란히 놓고 판단하지 않아도 된다.

생성기 밖에도 보통 하나씩 검색해야 하는 도구가 모여 있다. 색 선택기, 명도와 채도 단계 생성기, 색 혼합기, 색각 이상 시뮬레이터, CSS 색 이름, Tailwind 기본 팔레트 전체, 브랜드 색 참고, 그리고 개별 색 페이지의 변환 값과 배색 조화, 명암비 정보까지 있다. 하나씩 보면 새로울 게 없다. 같은 화면에 모여 있다는 점이 시간을 아낀다.