컬러 믹서
두 가지 색을 고르고 혼합 비율을 움직이면 중간색, 색 단계, 바로 붙여 넣을 수 있는 CSS를 확인할 수 있습니다.
기준 색상
HEX 코드를 직접 입력하거나 컬러 피커로 빠르게 선택할 수 있습니다.
색상 A
색상 B
혼합 비율
0%는 색상 A 그대로이고, 100%는 완전히 색상 B가 됩니다.
빠른 프리셋
먼저 분위기를 고른 뒤 브랜드 컬러에 맞게 미세 조정할 수 있습니다.CSS 그라데이션
background 속성에 바로 붙여 넣고, 필요에 따라 각도나 위치를 조정하면 됩니다.
혼합 결과
아래에 혼합된 HEX, RGB, HSL과 중간 색 단계가 함께 표시됩니다.
중간 색 단계
0%부터 100%까지의 혼합 과정을 한눈에 볼 수 있습니다.- 색상 A와 색상 B에 섞고 싶은 두 개의 HEX 코드를 입력하거나 컬러 피커로 색을 선택합니다.
- 슬라이더를 움직여 결과가 색상 A 쪽인지 색상 B 쪽인지 조정합니다.
- 오른쪽에는 혼합된 HEX, RGB, HSL이 즉시 갱신되어 디자인 시안, CSS, 디자인 시스템 문서에 바로 활용할 수 있습니다.
- 아래의 중간 색 단계는 여러 혼합 지점을 보여 주므로 hover, border, 배경 레이어 색을 고를 때 유용합니다.
- 빠르게 시도해 보고 싶다면 프리셋을 적용하거나 랜덤 조합 버튼을 사용하세요.
팁: 출력되는 CSS 그라데이션은 완성본이라기보다, 두 색과 중간색을 프로토타입에 빠르게 넣기 위한 출발점으로 보면 좋습니다.
언제 이 도구를 사용하나요?
브랜드 컬러, 버튼 색, 일러스트 메인 컬러처럼 기준이 되는 두 색이 있고 그 사이의 전환색이나 색 단계를 찾고 싶을 때, 또는 바로 쓸 수 있는 CSS 그라데이션을 만들고 싶을 때 적합합니다.
어떤 방식으로 색을 섞나요?
현재는 RGB 선형 보간으로 혼합합니다. 직관적이고 빠르기 때문에 웹 UI, 배경, 초기 비주얼 시안 작업에 잘 맞습니다.
생각했던 색과 조금 다르게 보이는 이유는 무엇인가요?
색 공간마다 혼합 방식이 다르기 때문입니다. RGB 혼합은 화면 표시 기준이므로 인쇄물이나 지각적 균일성이 중요하다면 전문 색상 도구로 다시 보정하는 것이 좋습니다.
브랜드용 색 단계 제작에도 쓸 수 있나요?
가능합니다. 먼저 5~6개의 전환색을 빠르게 만든 뒤 hover, 카드 배경, 구분선, 하이라이트에 적합한 색을 골라 쓰는 방식이 효율적입니다.
RGB나 HSL을 직접 입력할 수 있나요?
현재 기본 입력 형식은 HEX입니다. 디자인과 프런트엔드 사이에서 가장 복사하기 쉽기 때문입니다. 이미 RGB나 HSL 값이 있다면 사이트 내 컬러 변환 도구로 HEX로 바꾼 뒤 사용하면 됩니다.
생성된 CSS는 어디에 바로 쓸 수 있나요?
웹의 background 속성에 바로 사용할 수 있고, Figma, 프레젠테이션 도구, 디자인 시스템 문서의 출발점으로도 활용할 수 있습니다.
색상 대비와 접근성: WCAG 기준·대비율 계산 원리와 개선 기법
색상 대비율은 접근 가능한 웹 디자인의 핵심 지표로, 저시력·색맹·일반 사용자의 다양한 환경에서의 가독성에 영향을 미칩니다. WCAG 2.1 AA/AAA 등급, 상대적 휘도 계산 공식, 흔한 디자인 실수와 수정 전략을 설명합니다.
색상 코드 완전 가이드：RGB·HEX·HSL 변환 원리와 디자인 활용
RGB, HEX, HSL은 모두 같은 색을 표현하지만 방식이 전혀 다릅니다. 각 색상 모델의 설계 논리, 변환 수학, 사용 기준부터 WCAG 접근성 대응까지 완벽하게 정리합니다.
이미지 형식 선택 가이드：JPG·PNG·WebP·GIF 완전 비교
왜 PNG는 JPG보다 몇 배나 클까요? WebP는 언제 써야 할까요? GIF는 이제 구식인가요? 압축 원리부터 시작해 상황별 최적 형식을 선택하는 방법을 정리했습니다.
소셜 콘텐츠 이미지 편집 가이드: 규격, 비주얼 일관성, 내보내기 설정
소셜 콘텐츠의 완성도는 아이디어만으로 결정되지 않습니다. 이미지 크기, 구도, 브랜드 일관성, 출력 설정까지 재사용 가능한 편집 워크플로를 정리했습니다.
Markdown 완전 가이드：기초 문법부터 실전 활용까지
Markdown은 작가·개발자·콘텐츠 크리에이터가 가장 많이 사용하는 경량 마크업 언어입니다. 기본 문법부터 고급 테크닉, 플랫폼별 활용법까지 완전히 해설합니다.
PDF 병합·분할·압축 완전 정복：일상 문서 정리 가이드
큰 PDF에서 필요한 페이지만 꺼내고 싶다면? 여러 보고서를 하나로 합쳐야 한다면? 파일이 너무 커서 업로드가 안 된다면? 가장 흔한 PDF 작업 4가지를 설치 없이 해결하는 방법을 알아봅니다.