디자이너가 hex로 색상을 보냅니다: #1A73E8. CSS 프레임워크는 HSL을 원합니다. iOS 코드베이스는 0에서 1 사이의 RGB 값이 필요합니다. Android 프로젝트는 ARGB 정수를 사용합니다. 색상 하나에 형식 네 가지, 그리고 이를 서로 변환하기 위해 또 브라우저 탭을 엽니다.
색상 변환은 사소한 수학입니다(hex를 RGB로 바꾸는 것은 16진수를 10진수로 바꾸는 것에 불과합니다). 하지만 레이아웃이나 스타일링에 집중하려는 와중에 세 채널을 머릿속으로 계산하는 것은 불필요한 방해입니다.
macOS가 제공하는 것
macOS에는 일부 앱에서 시스템 색상 패널을 통해 접근할 수 있는 내장 색상 선택기가 있습니다. RGB 슬라이더와 hex 필드를 보여주지만, 형식을 프로그래밍적으로 변환하기 위한 것이 아니라 시각적으로 색상을 고르기 위해 설계되었습니다. hex 코드를 붙여넣고 HSL 값을 얻거나 RGB 정수를 입력하고 hex 출력을 복사할 손쉬운 방법이 없습니다. 그리고 시스템 전역에서 사용할 수 있는 것이 아니라 특정 앱 안에 묻혀 있습니다.
형식 사이에서 색상을 즉시 변환하기
Bellows는 41가지 개발자 도구 중 하나로 색상 변환기를 포함합니다. 지원되는 형식(hex, RGB, HSL) 중 어느 것으로든 색상을 입력하면 다른 모든 형식에 해당하는 값을 볼 수 있습니다. 필요한 표기법을 클릭 한 번으로 복사할 수 있습니다.
디자인에서 코드로
Figma는 색상을 hex로 내보냅니다. Tailwind CSS는 커스텀 색상 값을 사용합니다. SwiftUI는 소수점 값을 사용하는 Color(red:green:blue:)를 원합니다. Android XML은 #AARRGGBB를 사용합니다. 모든 형식을 한 번에 볼 수 있으면 암산과 변환 웹사이트 왕복이 사라집니다.
대비와 가독성 확인
색상이 숫자 값과 함께 렌더링되어 보이면 텍스트 색상이 배경과 비교해 읽기 편한지 빠르게 확인할 수 있습니다. 스타일시트의 모든 색상 조합마다 별도의 대비 검사기로 전환하는 것보다 빠릅니다.
메뉴 바 접근
CSS를 작성하다가 빠르게 변환이 필요하신가요? 메뉴 바의 Bellows 아이콘을 클릭하고, 색상 도구를 선택하고, hex 코드를 붙여넣고, RGB 값을 복사하세요. 전체 상호작용은 5초 이내에 끝나고 에디터를 벗어날 필요도 없습니다.