얼마 전 새 프로젝트에서는 Tailwind를 그만 쓰고 그냥 바닐라 CSS로 작성하기로 했다.

그런데 Tailwind에서 아쉬웠던 것 중 하나는 색상 팔레트 (CSS 버전은 여기)였다. 연한 파란색이 필요하면 그냥 blue-100을 쓰면 되고, 마음에 안 들면 blue-200이나 blue-50을 써 보면 됐다. 나는 색 감각이 그리 좋지 않아서, 색을 나보다 잘 아는 사람이 고민해서 만들어 둔 괜찮은 색상 팔레트가 있다는 게 정말 큰 도움이 된다.

하지만 Tailwind 색상에도 조금 질린 참이라, 오늘 Mastodon에 다른 색상 팔레트에는 어떤 것들이 있는지 물어봤다. 그러다 친구 한 명이 그 팔레트들 링크를 보고 싶다고 해서, 친구를 위해서, 그리고 다른 분들도 볼 수 있도록 이렇게 블로그 글로 남긴다 :)

내가 가장 좋아하는 것들

그중에서 가장 마음에 들었던 것은 다음과 같다:

• uchū (CSS 파일, FAQ)
• flexoki (CSS 파일)
• reasonable colours, 접근성에 중점을 둔 것 같다 (CSS 파일)

다른 색상 팔레트들

• web awesome
• radix
• 미국 웹 디자인 시스템
• 머티리얼 디자인

색상 팔레트 생성기

다른 분들이 여러 색상 팔레트 생성기도 알려 줬다

• harmonizer
• tints.dev
• coolors
• colorpalette.pro

나는 이런 생성기들이 늘 쓰기 어렵게 느껴졌지만, 언젠가 색 감각이 조금 더 좋아지면 제대로 활용할 수 있을지도 모르니 일단 링크는 남겨 둔다.

그리고 다른 색상 도구:

• colorhexa에는 색각 이상에 대한 정보가 있다

oklch

Generative colors with CSS에서는 oklch CSS 함수를 사용해 동적으로 색상을 생성하는 예제를 보여준다.