디자이너한테 색상 코드 받았는데 HEX 코드였다. #3B82F6 이런 식으로. 근데 CSS 작업하다 보니까 RGB 값이 필요한 경우가 있어서 변환해야 했다.
색상 변환기에 HEX 코드 넣으니까 바로 RGB 값이 나왔다. 59, 130, 246 이렇게.
HEX, RGB, HSL 상호 변환
HEX를 RGB로 바꾸는 것만 되는 게 아니라 RGB to HEX도 된다. HSL, CMYK까지 전부 상호 변환이 가능하다.
어떤 형식으로 입력해도 나머지 형식으로 다 변환해서 보여준다. 디자인 작업할 때 툴마다 요구하는 형식이 달라서 이거 자주 쓴다.
컬러 피커로 직접 선택
코드 없이 눈으로 색상 고르고 싶으면 컬러 코드 변환 도구에 있는 컬러 피커를 쓰면 된다. 원하는 색상 클릭하면 해당 색상의 HEX, RGB, HSL 값이 전부 나온다.
슬라이더로 미세 조정도 가능해서 정확한 색상 맞추기 좋다.
보색, 유사색 찾기
메인 색상 정하고 어울리는 색상 찾을 때 색상 조화 기능이 유용하다. 보색, 유사색, 트라이어드 색상을 자동으로 계산해준다.
배색 고민될 때 여기서 추천받은 색상 조합 쓰면 실패 확률이 낮다.
팔레트 자동 생성
선택한 색상 기준으로 밝기 단계별 HSL 변환 팔레트도 만들어준다. 10단계로 나눠서 같은 색상의 밝은 버전, 어두운 버전이 나온다.
버튼 hover 상태 색상 정할 때 원래 색상보다 살짝 어두운 색 찾기 좋다. 웹 색상 코드 작업할 때 많이 쓴다.