에디터의 프리셋 테마가 10종에서 115종의 팔레트로 크게 늘었습니다. 팔레트를 고르는 곳도 바뀌었습니다. 화면 한가운데를 덮는 모달 대신, 사이드바 바로 옆에 패널이 붙어 나와서 내 페이지를 보면서 스크롤로 둘러볼 수 있습니다. 마음에 드는 팔레트는 클릭 한 번으로 페이지 전체에 적용되고, Coolors에서 찾은 조합도 주소만 붙여 넣으면 내 팔레트로 쓸 수 있습니다.

1. 프리셋 테마 옆에 팔레트 패널이 열립니다

왼쪽 사이드바에서 프리셋 테마를 열면 기본 테마 10종 아래에 더 많은 팔레트 115 버튼이 있습니다. 누르면 사이드바 오른쪽에 팔레트 패널이 붙어 나옵니다. 팔레트는 2열 카드로 쌓여 있고, 아래로 스크롤하면서 둘러볼 수 있습니다.

카드 하나에는 글자색, 버튼색, 보조색, 카드 배경색, 그리고 5색 띠가 한눈에 들어 있습니다. 카드 아래에는 이름과 라이트·다크 구분이 표시됩니다. 패널 오른쪽 위의 X를 누르면 닫힙니다.

프리셋 테마 사이드바 오른쪽에 더 많은 팔레트 패널이 열려 있고, 강렬 스타일의 팔레트 카드들이 2열로 보이며 팝 옐로 카드에 마우스를 올리자 오른쪽 페이지의 강조색이 바뀐 에디터 화면

2. 마우스를 올리면 내 페이지에 바로 미리보기됩니다

카드에 마우스를 올리면 페이지에 그 팔레트가 미리 적용됩니다. 마우스를 치우면 원래 색으로 돌아옵니다. 카드를 클릭해 고른 뒤 적용을 누르면 확정되고, 마음에 들지 않으면 취소로 되돌릴 수 있습니다. 적용과 취소 버튼은 팔레트 패널 아래쪽에도 나타나서 스크롤을 되돌릴 필요가 없습니다.

아래는 같은 페이지에 ‘팝 옐로’ 팔레트를 적용한 모습입니다. 버튼과 강조 글자, 카드와 통계 띠의 색이 한 번에 바뀌었고, 글자와 배경의 짝은 그대로 읽힙니다.

보라색 계열의 원본 페이지와 팝 옐로 팔레트를 적용한 같은 페이지를 나란히 비교한 화면, 버튼과 강조 글자는 진분홍색으로 카드와 통계 띠는 노란색으로 바뀌었다

이 변환은 기존의 페이지 색상 자동 매핑이 맡습니다. 페이지에서 실제로 쓰인 색(CSS, 인라인 스타일, Tailwind 클래스 모두)을 분석해서 선택한 팔레트의 색으로 옮깁니다. 사이드바의 ‘페이지 색상 자동 매핑’ 체크는 기본으로 켜져 있습니다.

3. 분위기와 업종으로 찾습니다

115종을 처음부터 끝까지 넘겨 볼 필요가 없도록 거를 수 있습니다.

  • 라이트 / 다크: 밝은 페이지용과 어두운 페이지용을 나눠 봅니다.
  • 스타일 10종: 산뜻, 강렬, 무드, 파스텔, 클래식, 어스, 톤온톤, 다크, 네온, 주얼
  • 검색: 팔레트 이름뿐 아니라 분위기와 업종으로도 찾습니다. ‘뷰티’, ‘고급’, ‘푸드’처럼 입력하면 해당 태그가 붙은 팔레트만 남습니다.
더 많은 팔레트 패널에서 다크 필터를 켜서 다크 팔레트 32개만 보이는 화면, 미드나이트 바이올렛과 느와르 골드 같은 카드가 나열되어 있다
더 많은 팔레트 패널의 검색창에 뷰티를 입력해 뷰티 업종 태그가 붙은 팔레트 21개만 보이는 화면

4. 한 계열의 색만 나열하지 않았습니다

팔레트마다 서로 다른 색 계열을 함께 담았습니다. 주색과 보조색이 같은 계열이면 ‘톤온톤’으로 따로 분류해 개수를 제한했고, 나머지는 보색이나 대비되는 두 계열이 어우러지도록 설계했습니다. 같은 페이지가 팔레트에 따라 이렇게 달라집니다.

산뜻과 무드. 민트 베리는 진한 베리색 버튼에 민트가 곁들여진 산뜻한 조합이고, 레트로 70s는 번트 오렌지와 크림, 머스터드로 따뜻한 옛 포스터의 분위기를 냅니다.

같은 페이지에 민트 베리 팔레트와 레트로 70s 팔레트를 각각 적용한 화면을 나란히 놓은 비교 이미지

네온과 다크. 네온 사이버는 어두운 배경에 시안과 마젠타가 튀는 조합이고, 선셋 불러바드는 깊은 보라 바탕에 주황과 핑크 포인트가 들어갑니다. 다크 계열을 적용하면 버튼과 강조색만이 아니라 페이지 배경까지 어둡게 바뀝니다.

같은 페이지에 네온 사이버 팔레트와 선셋 불러바드 팔레트를 각각 적용한 화면을 나란히 놓은 비교 이미지, 둘 다 배경이 어둡게 바뀌었다

주얼. 아르데코 에메랄드처럼 짙은 유색 배경에 금색을 올린 조합도 있습니다. 같은 페이지가 고급스러운 브랜드 소개 페이지처럼 보입니다.

5. Coolors 팔레트를 그대로 가져옵니다

마음에 드는 조합을 따로 찾았다면 패널 위쪽의 내 팔레트 추가 칸에 Coolors 팔레트 주소(예: coolors.co/264653-2a9d8f-e9c46a-f4a261-e76f51)나 #hex 색상 목록을 붙여 넣고 추가를 누릅니다. 색상 2개 이상이면 됩니다.

붙여 넣은 색은 버튼, 보조색, 배경, 글자, 카드 배경의 다섯 역할로 자동 배정됩니다. 글자와 배경의 대비가 부족하면 읽히도록 색을 조금 보정합니다. 만들어진 팔레트는 ‘내 팔레트’로 저장되어(이 브라우저에 최대 30개) 다른 팔레트와 똑같이 미리보기하고 적용할 수 있습니다. 카드의 X로 삭제도 됩니다.

내 팔레트 추가 칸에 Coolors 주소를 붙여 넣어 내 팔레트 1 카드가 생기고 적용 버튼이 나타난 화면

아래는 위 Coolors 주소로 만든 팔레트를 적용한 모습입니다(오른쪽). 왼쪽은 아르데코 에메랄드입니다.

아르데코 에메랄드 팔레트와 Coolors 주소로 만든 내 팔레트를 같은 페이지에 각각 적용한 화면을 나란히 놓은 비교 이미지

6. 이 기능으로 할 수 있는 디자인 작업

팔레트를 고르는 일이 ‘색을 하나하나 바꾸는 작업’에서 ‘분위기를 고르는 작업’으로 바뀝니다. 실제로 이런 작업이 쉬워집니다.

  • 시안 비교를 몇 분 안에. 이미 만든 페이지에 카드를 하나씩 올려 보면서 같은 내용이 다른 분위기로 어떻게 보이는지 바로 비교합니다. 별도의 시안 작업 없이 바로 판단할 수 있습니다.
  • 업종에 맞는 분위기 찾기. ‘뷰티’, ‘푸드’, ‘금융’ 같은 업종 태그로 후보를 줄이고, 라이트·다크 필터로 한 번 더 좁힙니다.
  • 한 페이지에서 여러 얼굴 만들기. 같은 구성이라도 팝 옐로로 이벤트 페이지처럼, 아르데코 에메랄드로 브랜드 소개 페이지처럼 보이게 만들 수 있습니다. 캠페인이나 시즌에 맞춰 분위기를 바꿔 입히는 용도로도 쓸 수 있습니다.
  • 밝은 페이지를 다크 페이지로 한 번에. 다크 팔레트나 네온·주얼 팔레트는 배경부터 버튼, 카드, 글자까지 함께 뒤집어 줍니다. 라이트와 다크 버전을 따로 만들 필요가 없습니다.
  • 찾아 둔 조합을 그대로 활용. 디자인 레퍼런스 사이트에서 본 팔레트를 주소만 붙여 넣어 내 페이지에 입힙니다.

7. 적용한 뒤에는 한 번 훑어보세요

팔레트는 글자와 배경의 대비를 기준으로 미리 걸러 두었지만, 페이지마다 색을 쓰는 방식이 달라서 적용 후에 한 번 확인하시는 것이 좋습니다.

  • 밝은 팔레트는 흰 배경을 그대로 두고, 버튼·강조 글자·카드·띠 구역의 색을 바꿉니다. 페이지 배경 자체를 컬러로 바꾸고 싶다면 다크 계열 팔레트나 섹션 배경 교차를 함께 써 보세요.
  • 아주 옅은 색으로 칠한 배경은 바뀌지 않고 남을 수 있습니다.
  • 어두운 브랜드색 띠 위에 흰 글자를 올린 구역은, 팔레트의 강조색이 밝으면(예: 금색, 시안) 글자가 흐려 보일 수 있습니다. 이럴 때는 해당 구역의 글자색만 직접 바꿔 주세요.
  • 적용 전에는 언제든 취소로 되돌릴 수 있습니다.

팔레트 115종과 내 팔레트 가져오기는 지금 바로 사용하실 수 있습니다. 에디터 왼쪽의 프리셋 테마에서 더 많은 팔레트를 열어 보세요. 쓰다가 아쉬운 팔레트나 더 필요한 분위기가 있으면 알려 주세요.