색상 혼합기 빠른 시작 가이드

첫 번째 실행을 성공시키는 데 필요한 모든 것: 무엇을 붙여넣고, 어떤 옵션이 중요하며, 결과를 어떻게 읽는지.

입력 색상 혼합기 출력 100% 브라우저에서 실행 — 데이터가 기기를 벗어나지 않습니다.
색상 혼합기 — 입력 → 출력. 100% 브라우저에서 실행 — 데이터가 기기를 벗어나지 않습니다.

사용 방법

  1. 도구를 열고 왼쪽 입력창에 데이터를 붙여넣습니다.
  2. 작업에 정말 필요한 옵션만 조정하세요. 대부분의 경우 기본값이 올바릅니다.
  3. 오른쪽 출력창에서 결과를 확인합니다. 입력하면 실시간으로 갱신됩니다.
  4. 복사로 결과를 가져오거나 다운로드로 파일로 저장하세요.
사용 방법 · 색상 혼합기 1 입력창에 데이터를 붙여넣기 (또는 예제불러오기). 2 목적에 맞게 옵션 조정. 3 출력 복사·다운로드·확인 — 입력에 따라실시간 업데이트.
사용 방법 — 3

예제

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

입력

#0ea5b7

출력 — 검색 결과

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

실행

설명

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

색상 혼합기 → · 사용 방법 → · 색상 도구 →

관련 도구

16 진 색상 선택기Interactive picker with HEX, RGB and HSL output.색상 Code 변환기Convert between HEX, RGB, HSL and named colors.색상 명암비 검사기 (WCAG)Verify text contrast ratios against WCAG AA/AAA.색상 팔레트 생성기Shades, tints and complementary schemes from one color.난수 색상 생성기Batch random colors with copyable codes.CSS 이름 색상 참조표All 148 CSS color names with codes and previews.