두 가지 색과 그 사이에 넣을 색의 개수를 고르세요. 색을 하나씩 복사하거나 필요한 형식으로 팔레트를 내보낼 수 있어요.
시작 색과 끝 색을 코드로 입력하거나 색 선택기로 고른 다음, 그 사이에 넣을 색의 개수를 3~12개 중에서 정하세요. 중간색은 사람의 시각을 본뜬 색 공간(OKLab)에서 계산되므로 색 사이의 간격이 고르게 보이고, 중간에 탁한 회색이 생기지 않아요.
이 도구는 코드가 붙은 개별 색을 주기 때문에 하나씩 따로 쓸 수 있어요. Tailwind 색상 스케일, 차트, 프레젠테이션, 웹사이트의 섹션 등에 쓰기 좋아요. 한 색에서 다른 색으로 부드럽게 바뀌는 배경이 필요하다면 CSS 그라데이션 생성기를 사용하세요.
한 색에서 다른 색으로 조금씩 바뀌어 가는 색의 연속이에요. 예를 들어 분홍에서 하늘색까지 7단계로 바뀌는 식이에요. 각 색마다 고유한 HEX 코드가 있어 따로 쓸 수 있어요.
3개에서 12개까지예요. 색이 적으면 단계가 뚜렷하고, 많으면 전환이 더 부드러워지고 고를 수 있는 색도 늘어나요.
바로 쓸 수 있는 그라데이션이 포함된 CSS 변수, HEX 코드 목록, Tailwind 설정, JSON, SVG, PNG 이미지로 내보낼 수 있어요. 팔레트 생성기에서 열어 계속 편집할 수도 있어요.
사람의 시각에 맞춰 설계된 색 공간인 OKLab에서 색을 섞기 때문이에요. 분홍과 초록처럼 서로 반대되는 색을 RGB로 바로 섞으면 칙칙한 색을 거치지만, OKLab에서는 더 깨끗하고 고르게 바뀌어요.
네. 페이지 주소에 두 색과 색 개수가 저장되니 주소를 복사해서 보내면 돼요.
그라데이션 생성기는 CSS로 연속된 배경을 만들어요. 이 도구는 두 색 사이에 있는 색을 하나하나 따로 뽑아 주기 때문에 개별적으로 쓸 수 있어요.
네, 가입도 필요 없고 제한도 없어요. 마음에 드는 그라데이션은 하트로 저장할 수 있고, 이 브라우저에 저장돼요.
사이트 이용 방식을 알기 위해 Google Analytics 쿠키를 사용해요. 동의하시나요? 자세히 보기