색상 팔레트 & 16진수 추출기

색상을 직접 골라 16진수(HEX) 코드를 바로 복사하고 어울리는 팔레트를 조합하세요.

클릭하여 색상 변경
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)
배색 추천:

팔레트 색상을 클릭하면 16진수 코드가 즉시 복사됩니다

색상 팔레트 만드는 법

기준 색을 고르면 HEX, RGB, HSL 값을 바로 보여 주고, 각 값 옆의 복사 버튼으로 CSS에 그대로 붙여 넣을 수 있습니다. 아래 배색 버튼을 누르면 기준 색으로 다섯 가지 색 팔레트를 만들어 줍니다.

배색 방식 네 가지

  • 유사색: 색상환에서 기준 색 양옆 15°, 30° 떨어진 색을 모아 차분하고 자연스러운 조합을 만듭니다.
  • 보색: 정반대(180°) 색을 섞어 버튼이나 배너처럼 눈에 띄어야 하는 곳에 어울립니다.
  • 삼색 배색: 120°씩 떨어진 세 색으로 균형 있으면서도 화려한 조합을 만듭니다.
  • 톤온톤: 색상은 그대로 두고 밝기만 20%에서 80%까지 바꿔 한 가지 색으로 통일감을 줍니다.

실제로 쓸 때 팁

보통 배경과 본문에 한 색, 보조 요소에 한 색, 강조에 한 색 정도만 쓰는 편이 깔끔합니다. 글자색과 배경색은 밝기 차이가 충분해야 읽기 쉬우니, 톤온톤 팔레트의 가장 어두운 색과 가장 밝은 색을 짝지어 보세요.