랜덤 색상 생성기
스페이스바를 누르면 새 팔레트가 나옵니다. 배색 규칙과 톤을 고르고, 마음에 드는 색은 잠근 채 나머지만 다시 돌려 보세요. 색상 코드는 클릭하면 복사됩니다.
팁: 스페이스 키를 누르면 새 팔레트가 나옵니다. 잠근 색은 그대로 유지됩니다.
글자 대비
- Aa#264653흰 글자 10.1 · 검은 글자 1.8AAA
- Aa#2A9D8F흰 글자 3.3 · 검은 글자 5.4AA
- Aa#E9C46A흰 글자 1.7 · 검은 글자 10.7AAA
- Aa#F4A261흰 글자 2.1 · 검은 글자 8.7AAA
- Aa#E76F51흰 글자 3.1 · 검은 글자 5.8AA
최근 팔레트
넘긴 팔레트가 여기에 남습니다. 클릭하면 다시 불러옵니다.
- 그림 배색 챌린지색 세 개를 랜덤으로 뽑아 그 색만으로 그려 보세요. 늘 쓰던 배색에서 벗어나는 대표적인 연습법입니다.
- 디자인·브랜딩 아이디어무드보드, UI 테마, 로고 시안을 내가 고르지 않았을 배색에서 시작해 보세요.
- 개발·더미 데이터차트 계열 색, 프로필 배경색, 테스트 데이터용 HEX 코드를 바로 CSS 변수로 복사합니다.
- 공예·네일·코디뜨개실, 젤네일, 비즈, 오늘의 코디 색을 랜덤으로 정해 보세요.
마음에 드는 팔레트를 만드는 3단계
배색 규칙과 톤 고르기
랜덤은 무엇이든 나올 수 있습니다. 유사색과 톤온톤은 차분하고, 보색과 트라이어드는 강렬합니다. 파스텔, 비비드, 뮤트, 다크가 전체 분위기를 정합니다.
돌리고 잠그기
팔레트 생성 버튼이나 스페이스바를 누르세요. 좋은 색이 나오면 잠그면 됩니다. 다음부터는 그 색을 기준으로 배색이 만들어집니다.
복사해서 쓰기
HEX, RGB, HSL 값을 클릭해 복사하거나, 팔레트 전체를 CSS 변수로 복사하거나, 돌림판에 올려 한 가지 색을 뽑을 수 있습니다.
그냥 랜덤 HEX 코드가 아닙니다
배색 규칙 한눈에 보기
배색 규칙은 색상환 위의 위치 관계로 색상을 고르는 방법입니다. 생성기는 먼저 기준 색상을 랜덤으로 정하고 규칙에 따라 나머지 색을 배치하며, 톤이 채도와 밝기를 결정합니다.
| 배색 규칙 | 색상 관계 | 느낌 | 어울리는 곳 |
|---|---|---|---|
| 유사색 | 약 20~30도 이내의 이웃한 색상 | 차분하고 자연스러운 통일감 | 일러스트 배경, 풍경, 부드러운 브랜드 |
| 톤온톤 | 한 색상의 밝기만 여러 단계 | 깔끔하고 절제된 느낌 | UI 테마, 데이터 차트, 미니멀 포스터 |
| 보색 | 색상환의 반대편, 180도 | 강렬하고 대비가 뚜렷함 | 구매 버튼, 유니폼, 팝아트 |
| 분할 보색 | 기준 색과 그 보색의 양옆 색, 150도와 210도 | 활기차면서 균형 잡기 쉬움 | 캐릭터 디자인, 패키지 |
| 트라이어드 | 120도씩 떨어진 세 색상 | 경쾌하고 균형 잡힘 | 어린이 브랜드, 게임, 인포그래픽 |
| 테트라드 | 90도씩 떨어진 네 색상 | 풍성하고 다채로움 | 패턴, 축제 홍보물, 항목이 많은 차트 |
| 랜덤 | 색상끼리 관계없음 | 의외성, 가끔 충돌 | 그림 챌린지, 습관 깨기 |
팔레트를 쓸 때는 주조색 60%, 보조색 30%, 강조색 10%로 나누는 60-30-10 법칙을 참고하면 좋습니다.
HEX, RGB, HSL 중 무엇을 복사할까?
세 가지 모두 같은 화면 색을 나타냅니다. 빨강, 초록, 파랑이 각각 256단계라서 HEX로 표현할 수 있는 색은 16,777,216가지입니다.
| 형식 | 예시 | 숫자의 의미 | 쓰는 곳 |
|---|---|---|---|
| HEX | #2A9D8F | 빨강·초록·파랑을 16진수 두 자리씩, 00~FF | CSS, Figma, 미리캔버스, 대부분의 디자인 툴 |
| RGB | rgb(42, 157, 143) | 빨강·초록·파랑 각각 0~255 | 코딩, 포토샵, 이미지 편집 |
| HSL | hsl(173, 58%, 39%) | 색상은 각도, 채도와 밝기는 퍼센트 | 손으로 색 미세 조정, 명암 단계 만들기 |
대비 배지는 무슨 뜻인가요?
각 색 위의 글자는 흰색과 거의 검은색 중 더 잘 읽히는 쪽으로 자동 선택되며, 그 대비율이 표시됩니다. 등급은 웹 콘텐츠 접근성 지침 WCAG 2를 따릅니다.
- AAA, 7대1 이상: 본문용으로도 편하게 읽히며 저시력 사용자에게도 좋은 수준.
- AA, 4.5대1 이상: 웹사이트와 앱의 일반 크기 글자에 쓰이는 일반적인 최소 기준.
- 큰 글자만, 3대1 이상: 약 24픽셀, 굵게는 약 19픽셀 이상의 큰 글자나 아이콘, 버튼 테두리에 적합.
- 낮음, 3대1 미만: 글자 대신 장식이나 배경색으로 쓰세요.
그림 그리는 사람을 위한 랜덤 컬러 챌린지
- 3색 챌린지: 세 가지 색 팔레트를 뽑아 그 색과 흰색만으로 아무거나 그리기. 인스타그램 챌린지 태그로 올리기 좋습니다.
- 한정 색 풍경화: 뮤트 색 하나를 그림자 색으로 잠그고, 하늘 색이 마음에 들 때까지 나머지를 다시 돌리기.
- 캐릭터 컬러 바꾸기: 좋아하는 캐릭터를 트라이어드 팔레트로 다시 채색하기.
- 하루 한 색: 매일 랜덤 색 하나를 뽑아 실제로 그 색일 법한 물건 다섯 가지 그리기.
- 톤 바꾸기: 같은 장면을 파스텔과 다크로 두 번 그려 비교하기.
- 스피드 채색: 팔레트당 10분, 스페이스로 다음 팔레트, 다시 뽑기 금지.
자주 묻는 질문
랜덤 HEX 색상 코드 하나만 뽑으려면?
색상 수에서 한 가지를 고른 뒤 다른 색 버튼이나 스페이스바를 누르세요. HEX 코드가 크게 표시되고 클릭하면 복사됩니다. RGB나 HSL 줄을 클릭하면 그 형식으로 복사됩니다.
한 색은 남기고 나머지만 바꾸려면?
색 위쪽의 자물쇠 버튼을 눌러 잠그세요. 잠근 색은 다시 생성해도 바뀌지 않고, 유사색이나 트라이어드 같은 규칙은 처음 잠근 색을 기준으로 다시 짜입니다.
색 위에 표시되는 AA, AAA는 무슨 뜻인가요?
그 색 위에 있는 글자의 WCAG 명도 대비 등급입니다. AA는 일반 글자에 4.5대1 이상, AAA는 7대1 이상이 필요합니다. 큰 글자만은 큰 제목이나 아이콘에만 적합하다는 뜻입니다.
파스텔 톤이나 뮤트 톤 색을 랜덤으로 뽑을 수 있나요?
네. 톤을 파스텔로 하면 밝고 부드러운 색이, 뮤트로 하면 채도를 낮춘 차분한 색이 나옵니다. 모든 배색 규칙과 함께 쓸 수 있어서 파스텔과 유사색을 고르면 부드럽고 통일감 있는 팔레트가 됩니다.
팔레트를 CSS나 Figma에서 쓰려면?
CSS로 복사를 누르면 color-1부터 color-5 같은 CSS 사용자 정의 속성으로 복사되어 스타일시트에 바로 붙여 넣을 수 있습니다. HEX 목록 복사는 쉼표로 구분된 코드라서 Figma, 미리캔버스, 프로크리에이트에 하나씩 붙여 넣으면 됩니다.
스페이스바를 눌러도 새 팔레트가 안 나와요.
버튼, 링크, 입력란에 포커스가 있으면 스페이스바는 원래 기능(포커스된 버튼 누르기 등)을 우선합니다. 페이지의 빈 곳을 한 번 클릭한 뒤 다시 눌러 보세요.
정말 랜덤인가요?
네. 색상, 채도, 밝기는 톤이 정한 범위 안에서 브라우저의 암호학적 난수로 뽑힙니다. 모든 계산은 기기 안에서 이루어지고 서버로 아무것도 전송되지 않습니다.