Softonic

색상 틴트 생성기

단계 1 / 2
다음

틴트는 색을 흰색과 섞은 결과로, 단계마다 더 밝아집니다. 생성기는 기준 색을 받아 점점 밝아지는 틴트 사다리를 만들어, 디자인 시스템 팔레트 범위(100 → 400), 은은한 배경 채움, 어두운 기본색의 호버 상태, 강조색이 존재하되 조용해야 하는 배지/알림 배경에 유용합니다.

틴트 생성 원리

  1. 1

    기준 색 고르기

    색상 선택기로 기준 색을 고릅니다. 중간 명도 기준에서 가장 잘 작동합니다. 거의 흰색에 가까운 기준은 밝힐 여지가 거의 없습니다.

  2. 2

    단계 수 선택

    3단계부터 20단계까지, 기본값은 10입니다. 10이면 디자인 시스템 스케일 전체에 해당하고, 빠른 UI 작업에는 더 적은 단계로 충분합니다.

  3. 3

    흰색 비율을 높여가며 혼합

    10단계 기준 첫 틴트는 흰색 약 9%, 마지막 틴트는 약 91%를 섞습니다. 보간이 RGB 공간에서 직접 일어나므로 밝기가 올라갈수록 채도는 흐려집니다.

  4. 4

    HEX 값 읽기

    각 스와치는 자신의 HEX 값을 표시합니다. CSS 변수, Tailwind 스케일 또는 Sass 맵에 그대로 사용하세요.

#3B82F6의 예시 틴트 스케일

아래 표는 기본 10단계 설정으로 이 도구가 만들어내는 결과입니다.

단계 Hex 흰색 비율 일반적 용도
0 #3B82F6 기준 기본 브랜드색 (blue-500)
1 #4C8DF6 9.1% 어두운 배경의 밝은 호버
2 #5E98F7 18.2% blue-400 등가
3 #70A4F8 27.3%
4 #82AFF9 36.4% blue-300
5 #94BAFA 45.5%
6 #A5C6FA 54.5%
7 #B7D1FB 63.6%
8 #C9DCFC 72.7% 은은한 배경 (blue-100/200)
9 #DBE8FD 81.8%
10 #EDF3FE 90.9% blue-50

틴트 + 셰이드 = 디자인 시스템 스케일

단일 기준을 중심으로 틴트(더 밝음)와 셰이드(더 어두움)를 결합해 전체 스케일을 구성합니다:

  • 50, 100, 200, 300, 400: 틴트(가장 밝음부터 기준보다 약간 밝음까지)
  • 500: 기준
  • 600, 700, 800, 900: 셰이드(기준보다 약간 어두움부터 가장 어두움까지)

이는 Tailwind, Material, Open Color, Radix UI 및 대부분의 인기 디자인 시스템과 일치합니다. 10-11단계 스케일이 표준입니다.

UI에서 틴트가 빛나는 곳

  • 알림과 배지 배경: error-50 배경 위 error-500 텍스트 = 시각적으로 소리치지 않고도 즉각 인식.
  • 어두운 배경의 호버 상태: 어두운 표면의 버튼이 호버 시 더 밝은 틴트로 밝아짐.
  • 데이터 시각화 순차 스케일: 큰 값은 채도 높고 작은 값은 흰색으로 흐려지는 값-색 매핑.
  • 아바타 / 차트 카테고리 플레이스홀더: 이미지/데이터가 없을 때 기본색의 틴트.
  • 표면 레이어: 은은한 브랜드 존재감을 위해 브랜드 색으로 살짝 틴트한 카드 배경.

가장 밝은 틴트의 채도가 줄어드는 이유

생성기는 RGB 공간에서 직접 혼합합니다. 흰색이 더해질수록 지각된 밝기가 올라가는 속도보다 채도가 떨어지는 속도가 빨라서, 위쪽 단계는 창백하거나 회색조로 보입니다. RGB 혼합에서는 정상적인 현상입니다:

  • RGB 혼합(이 도구): 단순하고 예측 가능합니다. 채도가 꾸준히 흐려지고, 매우 밝은 단계는 탈색된 느낌입니다.
  • OKLCH 또는 LAB 보간: 밝게 하면서 크로마를 더 안정적으로 유지하기 위해 디자인 소프트웨어에서 사용합니다. 이 생성기에는 해당 모델이 없으므로, 색조가 안정적인 틴트가 필요하다면 OKLCH를 지원하는 디자인 도구에서 만드세요.
  • HSL 밝기 조절: 흰색을 섞지 않고 명도만 올리므로, 물감 같은 느낌보다는 파스텔풍으로 보일 수 있습니다.

사용 가능한 UI를 위한 틴트 하한

매우 밝은 틴트(8단계 이상)는 순백색에 가까워져 흰색 배경에서 시각적으로 구별되지 않습니다. 다음에 유용합니다:

  • 텍스트 뒤의 은은한 선택 강조.
  • 밀집한 표의 거의 보이지 않는 행 줄무늬.

하지만 사용자가 뚜렷한 색을 봐야 하는 버튼이나 레이블에는 좋지 않습니다. 밝은 틴트는 더 어두운 요소(테두리, 텍스트)와 짝지어 지지대를 마련하세요.

자주 묻는 질문

생성기가 RGB에서 직접 혼합하고, RGB 보간은 명도가 올라갈수록 채도를 끌어내리기 때문에 위쪽 단계는 흰색으로 쏠립니다. 대신 OKLCH나 LAB로 보간하면 기준 색조의 흔적이 남습니다. 그 점이 중요하다면 OKLCH를 지원하는 디자인 도구를 사용하세요.

비슷하지만 동일하지는 않습니다. 흰색과 혼합하면 채도와 명도가 비례해 줄어들고, HSL 명도 조정은 L을 독립적으로 높입니다. 틴트가 더 자연스럽게(물감처럼) 느껴지고, HSL 명도는 비현실적인 파스텔로 치우칠 수 있습니다.

네, 다크 모드는 배경이 이미 어둡기 때문에 보통 다른 “명도 사다리”가 필요합니다. 많은 시스템이 스케일을 반전합니다(다크 모드의 50은 라이트 모드 900의 어두운 배경 대비 흰색 등가물).

같은 기준에서 5단계 틴트 사다리(50-500)와 5단계 셰이드 사다리(500-900)를 생성하세요. 이어 붙이면 전체 10-11단계 디자인 시스템 스케일이 됩니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.