홈 › 색상·디자인

색상·디자인 도구 모음

22개 도구설치·로그인 없음브라우저에서 바로 처리
색상·디자인 카테고리는 웹 개발자와 디자이너가 자주 반복하는 색상 선택·CSS 코드 작업을 브라우저에서 바로 처리할 수 있도록 모아 둔 공간입니다. HEX·RGB·HSL 변환이나 RGB CMYK 변환처럼 색상 코드를 빠르게 바꾸는 도구부터, 색상 팔레트와 보색·배색 팔레트로 어울리는 배색 조합을 찾고, 그라데이션 생성기나 메시 그라데이션 생성기로 배경 CSS를 즉시 뽑아낼 수 있습니다. 명도대비 검사기(WCAG)로 텍스트 가독성을 확인하거나, 글래스모피즘 CSS 생성기·뉴모피즘 CSS 생성기로 트렌디한 UI 효과 코드를 슬라이더 조작만으로 얻을 수 있습니다. 그라데이션 텍스트 생성기와 CSS 텍스트 외곽선처럼 손이 많이 가는 글자 효과 코드도 클릭 몇 번으로 완성되고, 글자 파비콘·이니셜 아바타·placeholder 이미지 생성기로 필요한 이미지까지 바로 만들 수 있습니다. 파일 업로드 없이 모두 로컬에서 동작하므로 어떤 환경에서도 안전하게 사용할 수 있습니다.

색상·디자인 전체 도구 (22개)

그라데이션 생성기CSS 배경
그림자 생성기box-shadow
색상 팔레트배색 추천
명도대비 검사WCAG 접근성
HEX·RGB·HSL 변환색상 코드
랜덤 색상 생성무작위 색상을 생성하고 HEX·RGB를 복사합니다
색상 혼합기두 색상을 비율로 섞은 결과 색을 보여줍니다
명도 대비 검사기(WCAG)두 색의 명도 대비율을 계산해 WCAG AA·AAA 통과 여부를 확인합니다
그라데이션 텍스트 생성기두 색의 그라데이션 글자 CSS를 만들고 복사합니다
색상 명암 팔레트한 색의 밝은 톤·어두운 톤 단계를 자동 생성합니다
보색·배색 팔레트기준 색의 보색·유사색·삼색 조합을 생성합니다
글래스모피즘 CSS 생성기반투명 유리(글래스모피즘) 효과 CSS를 생성합니다
색상 이름 찾기HEX 색상과 가장 가까운 색 이름을 찾아줍니다
뉴모피즘 CSS 생성기부드러운 입체감의 뉴모피즘 CSS를 생성합니다
글자 파비콘 생성기글자와 색으로 파비콘(favicon) 이미지를 만듭니다
placeholder 이미지 생성기원하는 크기·색의 더미(placeholder) 이미지를 만듭니다
RGB CMYK 변환화면 색(RGB)을 인쇄용 CMYK로 변환합니다
메시 그라데이션 생성기여러 색이 어우러진 메시 그라데이션 배경 CSS를 생성합니다
CSS 색상 이름표CSS 표준 색상 이름과 HEX 코드를 모아 보여줍니다
머티리얼 색상 팔레트구글 머티리얼 디자인 색상을 모아 복사합니다
CSS 텍스트 외곽선글자에 외곽선(테두리)을 넣는 CSS를 생성합니다
이니셜 아바타 생성기이름 이니셜로 컬러 아바타 이미지를 만듭니다

일치하는 도구가 없어요.

다른 키워드로 찾아보거나, 아래 도구부터 열어 보세요.

자주 묻는 질문

정말 무료로 사용할 수 있나요?
네, 이 카테고리의 모든 도구는 완전 무료입니다. 회원가입이나 결제 없이 페이지를 열면 바로 사용할 수 있습니다.
색상 값이나 CSS 코드가 서버로 전송되나요?
아니요. 모든 계산과 코드 생성은 브라우저 안에서만 이루어집니다. 입력한 값은 외부 서버로 전송되지 않습니다.
설치나 플러그인이 필요한가요?
별도 설치나 플러그인 없이 크롬·사파리·엣지 등 최신 브라우저에서 바로 동작합니다.
생성된 CSS 코드를 어떤 프로젝트에도 쓸 수 있나요?
네, 생성된 코드는 표준 CSS이므로 HTML·React·Vue 등 어떤 웹 프로젝트에도 복사해 바로 붙여 넣을 수 있습니다. 라이선스 제한도 없습니다.
HEX와 RGB 중 뭘 쓰는 게 맞나요?
결과 색은 동일합니다. 웹 CSS·디자인 프로그램에 붙일 때는 짧은 HEX가 편하고, 이미지 편집이나 투명도(알파)를 함께 다룰 때는 RGB(A)가 편합니다. 이 도구는 둘을 자동 변환하니 상황에 맞는 형식을 골라 복사하면 됩니다.
대비 비율이 몇이면 안전한가요?
본문 글자는 4.5:1 이상이면 WCAG AA를 통과하고, 7:1 이상이면 더 엄격한 AAA까지 만족합니다. 큰 제목은 3:1이면 AA 기준을 넘습니다. 숫자가 낮을수록 저시력 사용자나 밝은 야외에서 읽기 어려워집니다.
HSL의 채도·명도를 0으로 하면 어떻게 되나요?
채도(S)가 0%면 색이 완전히 빠져 회색 계열이 되고, 명도(L)가 0%면 검정, 100%면 흰색이 됩니다. 그래서 같은 색상값이라도 명도만 낮추면 자연스러운 진한 버전, 높이면 파스텔 버전을 만들 수 있습니다.
생성한 CSS를 그대로 써도 되나요?
네. 그라데이션·그림자·글래스모피즘·텍스트 외곽선 모두 표준 CSS 속성으로 출력되므로 복사해 스타일에 붙이면 브라우저에서 그대로 동작합니다. 별도 라이브러리나 이미지 파일이 필요 없습니다.

색상 코드 변환은 이렇게 쓰세요

HEX, RGB, HSL은 같은 색을 다르게 적는 표기법입니다. HEX(#3B82F6)는 16진수로 빨강·초록·파랑을 두 자리씩 묶은 값이라 CSS·디자인 툴에 붙여넣기 좋고, RGB(59, 130, 246)는 0~255 정수라 이미지 편집에서 직관적입니다. HSL(217, 91%, 60%)은 색상(0~360도)·채도(%)·명도(%)로 나뉘어 "같은 색을 조금 더 밝게" 같은 조정이 쉽습니다. 변환기에 아무 형식이나 입력하면 나머지 두 형식이 동시에 계산되므로, 협업 중 색을 주고받거나 브랜드 색을 여러 도구에 옮길 때 오차 없이 복사할 수 있습니다.

HEX·RGB·HSL 변환 열어보기 →

명도대비 검사의 작동 원리

명도대비는 두 색의 상대휘도(사람 눈이 느끼는 밝기)를 계산해 (밝은색+0.05)÷(어두운색+0.05) 비율로 나타냅니다. 값은 1:1(완전 동일)부터 21:1(검정과 흰색)까지 나옵니다. 웹 접근성 기준(WCAG)에서 본문 크기 글자는 4.5:1 이상, 큰 글자(약 18.66px 굵게 또는 24px 이상)는 3:1 이상이면 AA를 통과합니다. 이 도구는 글자색과 배경색을 넣으면 비율과 AA/AAA 통과 여부를 바로 표시하므로, 연한 회색 글씨나 파스텔 버튼처럼 "예쁘지만 안 보이는" 조합을 사전에 걸러낼 수 있습니다.

명도대비 검사 열어보기 →

그라데이션과 CSS 생성기 활용

그라데이션 생성기는 시작 색과 끝 색 두 가지를 고르고 각도(deg)를 조절하면 linear-gradient() 코드를 그대로 뽑아 줍니다. 그림자·글래스모피즘·뉴모피즘 생성기는 슬라이더를 움직이는 즉시 미리보기가 바뀌고, 완성된 CSS를 복사해 붙이면 끝입니다. 특히 그림자는 box-shadow: x축 y축 흐림 번짐 색 순서로 값이 만들어지는데, 흐림을 키우고 색의 투명도를 낮추면 훨씬 자연스러운 그림자가 됩니다. 팔레트 도구로 메인 색을 정한 뒤 → 대비 검사로 글자색 확정 → 그림자·글래스모피즘 생성으로 UI를 완성하는 흐름이 가장 효율적입니다.

그라데이션 생성기 열어보기 →

알아두면 편한 팁

상황추천 사용
브랜드 색 톤 맞추기HSL에서 색상값 고정, 명도만 조절
글씨가 안 보임대비 검사로 4.5:1 이상 확인
은은한 그림자번짐 0, 흐림 크게, 색 투명도 15~25%
다크모드 대응배경·글자색 각각 대비 재검사

색상 명암 팔레트 열어보기 →