색상·CSS 도구
디자이너는 HEX를 건네고 코드는 알파 값이 붙은 RGB를 원합니다. 그 사이의 옮겨 적기에 실수가 삽니다.
- 색상 변환기 #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214)처럼 익숙한 어떤 표기로 입력해도 나머지 표기가 한꺼번에 나옵니다. 읽히는 글자색을 정하는 데 필요한…
- HEX를 RGB로 HEX 코드를 붙여넣으면 RGB 채널 값을 읽을 수 있습니다. #1f5fd6은 rgb(31, 95, 214)이 되고, 코드에 알파 채널이 있으면 투명도가 그대로인 rgba…
- RGB를 HEX로 rgb(31, 95, 214)을 붙여넣으면 — 쉼표든 공백이든 상관없습니다 — #1f5fd6이 나옵니다. CSS에도, 디자인 파일에도, 스타일 가이드에도 그대로 쓸 수 있…
- 색상 팔레트 생성기 기준 색을 고르면 나머지는 색상환을 따라 계산됩니다. 색을 누르면 코드가 복사되고, 사진을 넣으면 그 사진에서 바로 팔레트를 뽑습니다.
- CSS 그라데이션 생성기 슬라이더를 끌면 위 패널이 함께 바뀝니다. 마음에 들면 한 줄을 복사해 스타일시트에 붙여넣으면 끝입니다.
- CSS 그림자 생성기 슬라이더를 움직이면 견본이 같이 바뀝니다. 그림자 하나로 부족하면 레이어를 쌓으세요. 실제 화면의 부드럽고 자연스러운 깊이는 그렇게 만들어집니다.