3월 16, 2023

색채 종류와 명칭 | 색채 코드 파악과 사용 방법

색(color)은 조물주의 창조물 중 가장 경이롭고 아름다운 존재이다. 그리고 우주공간에 내재하는 다양한 색의 현상을 분류하고 정의한 색채체계는 인류가 성취한 위대한 지혜의 소산이다. 인간의 일상과 불가분의 관계에 있는 색채의 중요성은 IT 세상의 도래와 더불어 더욱 부상하고 있다. 다양한 색채 이름과 16진법에 의한 색채코드 파악 방법 소개에 앞서 혼선을 초래하는 색과 색채의 차이부터 알아본다.

색은 물체의 표면에서 반사되어 사람의 눈에 투영된 가시광선 파장이 뇌에 가한 자극 현상이며, 물체마다 다르게 느껴지는 차별화되고 일관된 감각과 지각적인 경험을 말한다.

색채는 감각과 지각 과정에서 발생하는 색의 다양한 느낌을 다른 색과 구별하는 근거가 되도록 빨강·파랑·노랑 등으로 규정한 특성(성질)을 말한다. 물감이나 색종이, 또는 아래 색채의 종류처럼 색을 물리적으로 표시한 것은 좋은 사례가 된다.

색채의 종류

갈색
개나리색
검정
귤색
금색
군청색
남색
노랑
녹색
다홍색
담청색
데님
등색
라벤더색
라임색
마리 루즈
바다색
밝은 보라
밝은 파랑
밤색
베이지색
보라
분홍색
빨강
상아색
살구색
세루리안 플래시
셀레스테
시안색
심홍색
산호색
셰필드 스틸
암청색
연두색
옥색
올리브색
은색
아이보리
아쿠아마린
에메랄드 그린
울트라 마린
자주색
자홍색
장미색
주황색
청록
청자색
초록색
카키색
코발트 블루
튤립 느와
파랑
풀색
프러시안 블루
하늘색
하양
황토색
회색

색채 적용

웹디자인 프로그램이나 HTML 문서 작성기로 색채를 선택하거나 색채 이름 또는 색채코드를 적시하면 웹 문서의 글자, 선, 배경 색채를 자유자재로 바꿀 수 있다.

특히 선택 방식보다 색채를 거의 무한대로 변경할 수 있는 HTML 적시 방법은 다음과 같다.

<div style="width:300px;height:300px;border:2px solid red;margin:0 auto;">
<div style="width:250px;height:250px;border:2px solid blue;margin:0 auto;">
<div style="width:200px;height:200px;background:yellow;margin:0 auto;">
<h1 style="color:#000000;">색채 바꾸기</h1>
</div></div></div>

색채 바꾸기

색채 코드

HTML은 일부 공식화된 기본 색채는 이름을 인식하기 때문에 코드 대신 red, blue, green 등 이름을 사용해도 된다. 색채코드는 16진수(Hexadecimal)로 구성된다. #에 세 자리나 여섯 자리의 숫자로 RGB(빨강, 녹색, 파랑)의 비율을 적시하여 모니터 등 영상 화면에 여러 가지 색채를 나타낸다. 각각 마지막 두 자리나 한 자리에 알파 값(투명도)을 지정하는 여덟 자리 또는 네 자리로 나타낼 수도 있다. 완전한 투명은 00 또는 0, FF 또는 F로 불투명을 나타낸다.

색채코드 파악 방법은 여러 가지가 있으나, 가장 간편하고 막강한 구글 크롬 브라우저 개발자 도구를 소개한다.

  1. 크롬 브라우저를 실행한다.
  2. 불특정 페이지의 글자 부분에 커서를 위치시킨다.
  3. 마우스 오른쪽 버튼을 누른다.
  4. 팝업메뉴에서 검사를 클릭한다.
  5. 개발자 도구 style 부분 색채 아이콘을 클릭한다.
  6. 색채코드를 참고한다.
  7. 색채 바에 선호하는 색채 부분에 슬라이딩한다.
  8. 색채 패널의 원하는 곳에 클릭해서 색채코드를 표시한다.

댓글