Utilore

컬러 피커

사각형 위를 훑어 색을 고르거나, 이미 있는 색을 가져오세요. 이미지에서는 스포이트로, 브라우저가 허용하면 화면 어디서든. 코드는 세 가지 표기로 바로 나옵니다.

색 고르기

최근 색

화면 아무 곳에서나 색을 뽑는 것은 Chrome과 Edge에만 있는 기능입니다. Safari와 Firefox에서는 버튼을 아예 보이지 않습니다. 약속했다가 거절하는 편이 처음부터 내놓지 않는 것보다 나쁘기 때문입니다. 그럴 때는 이미지를 쓰세요. 스크린샷이면 충분합니다.

그림은 이 탭에 머뭅니다. 색은 여기 캔버스에서 읽고, 업로드는 없습니다. 최근 색은 이 기기에만 기억됩니다.

가까운 도구: 색상 변환기 · 색상 팔레트 생성기 · CSS 그라데이션 생성기 · HEX를 RGB로

사용 방법

  1. 사각형을 끌어 색조를 고르고, 아래 슬라이더로 색 계열을 바꿉니다.
  2. 반투명이 필요하면 불투명도를 조절하세요. rgba로, 또는 HEX 끝의 두 글자로 나타납니다.
  3. 이미 있는 색을 가져오려면 「이미지에서 뽑기」를 누르고 그림을 클릭하세요. Chrome과 Edge에서는 화면에서 바로 뽑을 수도 있습니다.
  4. 원하는 표기 옆의 「복사」를 누르세요. 색은 최근 색 띠에 들어가 다시 쓸 수 있습니다.

알아두면 좋은 점

사각형을 HSV로 만든 이유

HSV에서는 채도 대 명도의 사각형이 끝에서 끝까지 채워집니다. 어느 점이든 저마다 다른 색입니다. 같은 사각형을 HSL로 만들면 무너집니다. 맨 위 줄은 온통 흰색, 맨 아래 줄은 온통 검은색이라 면적의 절반이 아무것도 고르지 못합니다. 선택의 이유는 그것뿐이고, 시험이 지키는 것도 바로 이 한 가지입니다.

들어오는 길이 셋인 이유

색을 고르는 일과 색을 찾는 일은 다릅니다. 사각형은 고르기 위한 것입니다. 이미지 위의 스포이트는 이미 어딘가에 있는 색을 위한 것입니다. 스크린샷, 로고, 사진 속의 색 말입니다. 화면에서 뽑기는 창을 떠나지 않고 같은 일을 하는 것이며, 이것은 Chrome과 Edge만 할 수 있습니다.

투명도가 나타나는 자리

불투명도는 온전하지 않을 때만 씁니다. 「rgba(31, 95, 214, 1)」가 아니라 「rgb(31, 95, 214)」입니다. 앞의 것은 어차피 손으로 정리하게 됩니다. HEX에서는 투명도가 끝의 두 글자가 됩니다. 요즘 브라우저는 알아듣지만 오래된 도구는 못 알아들으므로, 완전 불투명일 때는 꼬리를 쓰지 않습니다.

자주 묻는 질문

제 브라우저에는 「화면에서 뽑기」 버튼이 없습니다.

Safari와 Firefox가 그 기능을 갖고 있지 않기 때문입니다. 브라우저의 기능이지 저희 것이 아니며, Chrome과 Edge에만 있습니다. 버튼을 보여 주고 거절하는 편이 아예 내놓지 않는 것보다 나쁘므로 아예 표시하지 않습니다. 스크린샷을 찍어 이미지에서 뽑으면 결과는 같습니다.

사진의 한 점 색을 알려면?

「이미지에서 뽑기」를 누르고 파일을 고른 뒤 사진 위로 포인터를 옮기세요. 색이 포인터를 따라옵니다. 누르면 그 색이 남습니다. 그림은 어디에도 올라가지 않습니다. 이 탭의 캔버스에 그려 거기서 읽습니다.

고르는 대신 색을 입력해도 되나요?

됩니다. 세 입력란 가운데 아무 데나 흔한 형태로 넣으세요. #1f5fd6, 1f5fd6, rgb(31, 95, 214) 같은 식입니다. 나머지 둘과 사각형이 알아서 따라옵니다. 표기만 바꾸면 되는 일이라면 옆의 색 변환기가 더 가깝습니다.

명도를 0으로 내리면 색상 슬라이더가 튑니다.

튀어서는 안 되고, 튀지 않습니다. 검정과 하양에는 색상이 아예 없으므로 슬라이더는 빨강으로 돌아가지 않고 이전 값을 지킵니다. 일부러 그렇게 했습니다. 그러지 않으면 사각형 아래로 내려갈 때마다 작업하던 색 계열을 잃게 됩니다.

최근 색은 어디에 저장되나요?

이 기기의 브라우저 안입니다. 어디로도 보내지 않고 당신과 엮이지도 않습니다. 사이트 데이터를 지우면 띠는 다시 비워집니다.

관련 도구