[design] 컬러 시스템 – Adobe spectrum
2023.11.03 / color, design

컬러 시스템에 대한 아래 내용은 개인적으로 쓰는 사이트 제작 시 가장 많이 쓰이면서 미묘하게 다양한 톤이 필요한 “회색”에 대해 컬러에 대한 센스가 1도 없는 내가 개인적으로 참고 하기 위해 정리한 페이지

Gray: 회색 = 중성색(완전히 채도가 낮음) : 모든 색상과 함께 사용 가능

회색 50 ~ 200 : 프레임 깊이와 시각적 계층 구조를 만드는 배경 레이어에 사용. 단독 배경은 회색 -100이 기본 색

회색 200,300 : 장식 테두리와 픟레임에 사용. 필수적이지 않는 미묘한 대비에 사용

회색 400 : 필드 테두리(텍스트 필드, 작업 버튼)

회색 600 : 컨트롤 테두리(스위치, 라디오버튼, 확인란)

회색 700 ~ 900 : 텍스트 콘텐츠용

회색 500 : 비활성화 텍스트 용

회색 600 ~ 900 : 아이콘 콘텐츠용

회색 500 : 라인 일러스트용. 비활성화된 아이콘 용.

색상은 컨텍스트 제공, UI의 작업 계층 생성, 콘텐츠 유형 간의 관계 표시

선택 또는 포커스의 항목 = 즉각적 작업과 시각적 중요성 부여

색상 100 : 투톤 색상 = 2가지 컬러 결합하여 아이콘이나 일러스트 배경으로 사용

색상 400 ~ 600 : 불필요한 UI 장식에 사용

색상 600 ~ 800 : 구성 요소 테두리 / 800은 의미 없는 테두리 색상

색상 700 ~ 1100 : 아이콘과 일러스트 콘텐츠 사용

색상 900 : 컬러 콘텐츠. 부정정 의미에 사용