컬러 피커 · 색상 코드 변환
색을 고르거나 코드를 붙여 넣으면 모든 형식으로 바로 바뀌어요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
#0F766E
색상 코드
밝게 (흰색 섞기)
어둡게 (검은색 섞기)
칸을 누르면 그 색으로 바뀌어요. 숫자는 섞은 비율(%)이에요.
CSS 변수
사용 방법
- 왼쪽 색 칸을 눌러 색을 고르거나, 아래 HEX·RGB 같은 칸에 색상 코드를 붙여 넣으세요.
- 어느 칸을 고쳐도 나머지 형식이 함께 바뀌어요. 「rgb(」 없이 숫자 세 개만 넣어도 돼요.
- 밝게·어둡게 줄에서 비슷한 색을 고를 수 있고, 누르면 그 색이 기준이 돼요.
- 「CSS 변수」에서 변수 이름을 정한 뒤 복사해 스타일시트에 붙여 넣으세요. 주소에 색이 담겨 있어 그대로 공유할 수 있어요.
자주 묻는 질문
HEX 와 RGB 는 무엇이 다른가요?
같은 색을 다르게 적은 것이에요. HEX 는 빨강·초록·파랑 값(0~255)을 16진수 두 자리씩 이어 쓰고, RGB 는 같은 값을 10진수로 적어요.
CMYK 값으로 인쇄하면 화면과 같은 색이 나오나요?
여기의 CMYK 는 화면 색을 단순 계산으로 바꾼 참고값이에요. 실제 인쇄색은 용지·잉크·인쇄소의 색 프로파일에 따라 달라지니 인쇄소 기준으로 다시 확인하세요.
OKLCH 는 무엇인가요?
사람 눈에 느껴지는 밝기(L)·채도(C)·색상(H)으로 색을 나타내는 방식이에요. 최신 CSS 에서 oklch() 로 바로 쓸 수 있고, 밝기만 바꿔도 색감이 덜 틀어져요.
「화면에서 색 찍기」 버튼이 안 보여요.
크롬·엣지처럼 EyeDropper 기능을 지원하는 PC 브라우저에서만 보여요. 다른 브라우저에서는 이미지 색 추출 도구로 사진 속 색을 찾아보세요.