ABOUT ME

-

Today
-
Yesterday
-
Total
-
DESIGNER × DEVELOPER
UI를 그리고,
코드로 완성한다.
디자이너가 코딩하며 겪은 것들을 기록합니다.
  • 컬러 팔레트 고를 때 쓰는 사이트 — Coolors 활용법
    툴 & 환경설정 2026. 5. 10. 10:00

    디자인 작업을 하다 보면 색상 조합이 막히는 순간이 있다. 메인 컬러는 정했는데 어울리는 보조 색상을 고르는 게 생각보다 쉽지 않다. 그럴 때 쓰는 사이트가 Coolors(coolors.co)다.

    메인 컬러 하나를 고르면 어울리는 색상 조합을 자동으로 만들어준다. 스페이스바를 누를 때마다 새로운 팔레트가 생성되어서 마음에 드는 조합을 찾을 때까지 계속 돌려볼 수 있다.

    Coolors 기본 사용법

    • 1
      coolors.co 접속 → Start the generator 클릭
    • 2
      스페이스바를 누르면 새로운 팔레트가 랜덤으로 생성된다
    • 3
      마음에 드는 색상이 있으면 해당 색상 위에 마우스를 올리고 자물쇠 아이콘 클릭 → 고정
    • 4
      고정된 색상은 유지하면서 나머지만 계속 바꿔가며 조합을 찾는다
    스페이스바 한 번으로 새로운 컬러 팔레트가 생성된다

    특정 색상에서 시작하고 싶을 때

    브랜드 컬러가 이미 정해져 있고, 거기에 어울리는 조합을 찾고 싶을 때도 쓸 수 있다. 색상 칸을 클릭하면 HEX 코드를 직접 입력할 수 있다. 원하는 컬러를 입력하고 자물쇠로 고정한 뒤 스페이스바를 누르면 그 색상을 기준으로 조합이 생성된다.

    💡 HEX 코드를 바로 복사할 수 있다 마음에 드는 색상을 클릭하면 HEX 코드가 바로 복사된다. 피그마나 CSS에 바로 붙여넣을 수 있어서 편하다.

    팔레트 저장하고 내보내기

    마음에 드는 팔레트를 찾았으면 상단 Export 버튼으로 저장하거나 링크로 공유할 수 있다. PNG 이미지로 내보내거나 CSS 코드로 바로 추출하는 것도 가능하다.

    Coolors는 컬러 팔레트를 빠르게 찾을 수 있는 무료 사이트다.
    스페이스바로 랜덤 생성, 자물쇠로 색상 고정, HEX 코드 바로 복사 — 이 세 가지만 알면 충분히 활용할 수 있다.
    사이트 바로가기 → coolors.co

Designed by Tistory.