Morph 컬러 피커를 사용하면 색상을 눈으로 직접 고르고, 실제로 사용하는 형식인 HEX(`#3A7BD5`), RGB(`rgb(58, 123, 213)`), HSL(`hsl(214, 64%, 53%)`) 코드를 바로 확인할 수 있습니다. 색상 필드를 드래그하고 색조 슬라이더로 미세 조정한 다음, 값을 CSS나 디자인 파일 등 필요한 곳에 바로 복사해 붙여넣으세요.
세 코드 모두 같은 색상을 나타냅니다. 표기 방식만 다를 뿐이며, 각각 쓰임새가 있습니다:
어떤 방식으로 색을 바꾸든 세 코드는 항상 함께 갱신되므로, 프로젝트에 필요한 값을 그때그때 골라 쓰면 됩니다.
디자이너는 팔레트를 확정하고 정확한 값을 디자인 파일이나 스타일 가이드에 복사하는 데 사용합니다. 프런트엔드 개발자는 버튼에 쓸 HEX 값을 가져오거나, 디자이너가 준 RGB를 HSL로 변환해 호버 상태를 만드는 데 사용합니다. 테마나 차트 색상, 이메일 템플릿을 다듬는 사람이라면 원하는 정확한 색조를 찾아 클릭 한 번으로 복사할 수 있습니다. HEX 바로 옆에 HSL이 있으므로, 기본 색상의 밝고 어두운 변형을 만들 때 16진수 숫자를 눈대중으로 맞추는 것보다 훨씬 쉽습니다.
컬러 피커는 순수한 브라우저 코드로, 색상 계산과 인터페이스 모두 내 기기에서 실행됩니다. 업로드도 없고, 계정도 필요 없으며, 서버로 전송되는 것도 없습니다. 페이지를 한 번 열면 빠르게 로드되고 오프라인에서도 계속 동작하는데, 색을 고르고 코드를 계산하는 데는 네트워크 연결이 전혀 필요 없기 때문입니다.
HEX 값을 복사하면 그대로 CSS에 붙여넣을 수 있습니다. 투명도가 있는 색상이 필요하다면 RGB로 변환한 뒤 코드에서 알파 채널(`rgba(...)`)을 추가하세요. 일관된 팔레트를 만들려면 기본 색상 하나를 정하고, 색조와 채도는 고정한 채 HSL의 명도 값만 위아래로 조정해 밝은 색과 어두운 색을 만들어 보세요. 그러면 색상들이 무작위로 모인 것이 아니라 하나의 계열처럼 느껴집니다.
선택한 모든 색상에 대해 HEX, RGB, HSL을 함께 보여주며 항상 동기화되어 있으므로, 프로젝트에 필요한 형식을 골라 복사하면 됩니다.
HSL을 사용하면 명도를 높여 밝은 색을, 낮춰 어두운 색을 만들거나 색조를 옮기는 등 16진수 숫자를 추측하지 않고도 색상을 직관적으로 조정할 수 있습니다.
원하는 색을 고른 뒤 RGB 값을 복사하고, 코드에서 rgba(...) 형태로 알파 채널을 추가하면 원하는 투명도를 설정할 수 있습니다.
아니요. 컬러 피커는 전적으로 브라우저에서 실행됩니다. 업로드도 없고 서버로 전송되는 것도 없으며, 한 번 불러온 뒤에는 오프라인에서도 동작합니다.
기본 색상을 하나 정하고 HSL 값을 활용하세요. 색조와 채도는 고정한 채 명도만 위아래로 조정하면 하나의 세트처럼 느껴지는 밝은 색과 어두운 색을 만들 수 있습니다.