덤프버전이 더 최근에 편집되었을 수 있습니다. > 덤프판 보기
헥스 코드
최근 편집일시 :
16진수 자체에 대한 내용은 16진법 문서 참고하십시오.
Hex color codes
RGB 방식 색상 코드 표기법이다. #과 뒤에 붙는 여섯 자리[1] 또는 세 자리[2] 의 숫자로 색상을 표기하는 방식이다. 여섯 자리인 경우는 두 자리씩 끊어서 각각 Red, Green, Blue의 강도를 256(=162)단계에 걸쳐 나타낸 것이며, 각 두 자리수는 16진수이므로 00(=010)일 때 가장 어둡고 FF(=25510)일 때 가장 밝다. 중간값은 80(=12810)이다. 세자리인 경우는 한자리씩 끊어서 역시 'Red', 'Green', 'Blue' 이며 각 색상의 강도를 16단계씩 나타낸다.[3]
여덟 자리 또는 네 자리로도 나타낼 수 있는데, 이 경우 각각 뒤에 추가되는 두 자리 또는 한 자리는 알파값 즉 투명도를 의미한다. 00 또는 0일 때 완전히 투명해지고, FF 또는 F일때 불투명해진다.
나무위키에서는 색상 코드 앞에 #를 붙여야 한다. 다른 사이트에서는 간혹 #를 붙이지 않아도 헥스 코드 입력으로 인정해주지만,나무위키에서는 색이 아니라 글자가 나온다 꼭 이 점 주의하도록 하자.
16진수를 쓰다 보니 0~9 외에도 알파벳 A~F까지를 쓰게 되는데 알파벳은 대문자를 입력하든 소문자를 입력하든 어쨌든 색상은 같다.
잉크의 합성 원리와 반대되는 빛의 합성 원리(가산혼합)를 따르는 색상 표기 방식이라 할 수 있다.
R, G, B 성분이 모두 최대치(0xFF)이면 모든 빛을 혼합한 모습인 흰색이 나타나고, 모두 최소치(0x00)이면 빛이 하나도 들어오지 않은 상태이므로 검은색이 나타난다.
세 성분을 모두 같은 강도로 주면 무채색을 얻을 수 있다. 검은색과 흰색도 최소/최대치로 서로 같은 강도이므로 무채색에 속하며, 중간치의 같은 강도를 주면(#808080) 회색이 된다.
특정 성분에만 강한 강도를 부여하면 선명한 유채색이 나타난다. 예를 들어 #FF0000이면 R값이 최고값이고 나머지는 0이므로 순수한 빨간색이 나타난다. #FFFF00이면 R값과 G값이 최고값이고 B값이 0이므로 R과 G의 합성 빛인 [[노란색|
]]이 나타난다.
색깔의 명암조절 원리는 다음과 같다. 순수 파랑은 #0000FF일 것이다.[4] 여기서 B 성분에만 절반의 강도를 주면 (#000080) 파랑과 검정의 사이인 [[남색|
헥스 코드로 나타낼 수 있는 색상의 수는 총 166=1677만 7216가지이다.
마지막에 투명도(Alpha) 값 두 자리를 추가하여 여덟 자리로 표기하는 방법도 있는데, 표준에 늦게 추가되었기 때문에 지원하는 브라우저가 적다.[5]
다른 방식들에 비해 짧은 6자리 문자열로 색을 표현할 수 있기 때문에 주로 디지털에서[6] 많이 쓰인다. 프로그래머(특히 프론트엔드 프로그래머)들은 워낙 이 작업을 매우 많이 해서 어지간한 색들의 색상코드는 거의 다 알고 있다고 해도 과언이 아니다. 실제로 작업하다 보면 자의 반 타의 반으로 외우게 된다.
이 문서에 수록된 색상과 헥스 코드보다 더 많은 정보를 얻고자 한다면 다음 링크에서 확인이 가능하다.
자세한 내용은 나무위키:문법 도움말 문서를 참고하십시오.
자세한 내용은 나무위키:문법 도움말 문서를 참고하십시오.
CSS Color Module Level 3 명세를 참고해도 된다. CSS 색상명은 대소문자를 구분하지 않지만 PascalCase(띄어쓰기 없이 모든 단어의 첫 글자를 대문자로 표기)로 표기하였고, 수록 순서는 다음과 같다.
몇몇 색상은 이름이 여러 가지로 등록되어 있다. 특히 Gray/Grey가 들어간 색상은 어느 쪽을 써도 무방하다.
CSS 초기부터 정의되어 있던 색이다. 단, 이름이 여러 가지인 색 중
1992년에 국립현대미술관에서 「한국전통표준색명 및 색상 제 2차 시안」을 발간했으며, 이 자료에서는 전통색을 90가지로 정리했다. 국립중앙도서관 전자도서관 목록에 금색도 포함되어 있지만 정리 자료에 따라 나타내지 않기도 한다. 같은 금속이지만 은색은 포함되지 않았다. 앞의 링크 자료를 봐도 금색 부분은 금박을 스캔한 듯한 것이 있기는 하나, 색상코드(먼셀)가 표기되진 않았다.
「한국전통표준색명 및 색상 제 2차 시안」에서는 남아있는 전통 색상 명칭을 가지고 추정했는데, 오방색, 두 가지 오방색으로 배합된 색명, 한 가지 오방색이 포함된 색명, 명암을 나타내는 색명, 채도를 나타내는 색명, 기억색명, 단청색명, 기타 특수용어로서 문헌 설명을 통해서만 알 수 있는 색깔로 나누어 추정했다고 밝혔다. 이외에도 염색재료, 염색방법, 경험자의 의견, 과거의 경험 등 가능한 많은 방법을 사용했다고 밝히고 있다.
전통색을 다룬 서적으로 한국의 전통색(문은배/안그라픽스)과 한국의 전통색(이재만/일진사)이 있다.
정리짤1
정리짤2
정리짤3
'''[[커피|
자세한 내용은 위키피디아의 Hexspeak 문서 참고.
1. 개요[편집]
Hex color codes
RGB 방식 색상 코드 표기법이다. #과 뒤에 붙는 여섯 자리[1] 또는 세 자리[2] 의 숫자로 색상을 표기하는 방식이다. 여섯 자리인 경우는 두 자리씩 끊어서 각각 Red, Green, Blue의 강도를 256(=162)단계에 걸쳐 나타낸 것이며, 각 두 자리수는 16진수이므로 00(=010)일 때 가장 어둡고 FF(=25510)일 때 가장 밝다. 중간값은 80(=12810)이다. 세자리인 경우는 한자리씩 끊어서 역시 'Red', 'Green', 'Blue' 이며 각 색상의 강도를 16단계씩 나타낸다.[3]
여덟 자리 또는 네 자리로도 나타낼 수 있는데, 이 경우 각각 뒤에 추가되는 두 자리 또는 한 자리는 알파값 즉 투명도를 의미한다. 00 또는 0일 때 완전히 투명해지고, FF 또는 F일때 불투명해진다.
2. 상세[편집]
나무위키에서는 색상 코드 앞에 #를 붙여야 한다. 다른 사이트에서는 간혹 #를 붙이지 않아도 헥스 코드 입력으로 인정해주지만,
16진수를 쓰다 보니 0~9 외에도 알파벳 A~F까지를 쓰게 되는데 알파벳은 대문자를 입력하든 소문자를 입력하든 어쨌든 색상은 같다.
잉크의 합성 원리와 반대되는 빛의 합성 원리(가산혼합)를 따르는 색상 표기 방식이라 할 수 있다.
R, G, B 성분이 모두 최대치(0xFF)이면 모든 빛을 혼합한 모습인 흰색이 나타나고, 모두 최소치(0x00)이면 빛이 하나도 들어오지 않은 상태이므로 검은색이 나타난다.
세 성분을 모두 같은 강도로 주면 무채색을 얻을 수 있다. 검은색과 흰색도 최소/최대치로 서로 같은 강도이므로 무채색에 속하며, 중간치의 같은 강도를 주면(#808080) 회색이 된다.
특정 성분에만 강한 강도를 부여하면 선명한 유채색이 나타난다. 예를 들어 #FF0000이면 R값이 최고값이고 나머지는 0이므로 순수한 빨간색이 나타난다. #FFFF00이면 R값과 G값이 최고값이고 B값이 0이므로 R과 G의 합성 빛인 [[노란색|
]]이 나타난다.
색깔의 명암조절 원리는 다음과 같다. 순수 파랑은 #0000FF일 것이다.[4] 여기서 B 성분에만 절반의 강도를 주면 (#000080) 파랑과 검정의 사이인 [[남색|
어두운 파랑
]]을 얻을 수 있다. B 성분에 강도를 최대한 준 채로 다른 두 성분에도 일부의 강도를 주면(#8080FF) 파랑의 순도가 낮아지면서 밝은 파랑이 얻어진다.헥스 코드로 나타낼 수 있는 색상의 수는 총 166=1677만 7216가지이다.
마지막에 투명도(Alpha) 값 두 자리를 추가하여 여덟 자리로 표기하는 방법도 있는데, 표준에 늦게 추가되었기 때문에 지원하는 브라우저가 적다.[5]
다른 방식들에 비해 짧은 6자리 문자열로 색을 표현할 수 있기 때문에 주로 디지털에서[6] 많이 쓰인다. 프로그래머(특히 프론트엔드 프로그래머)들은 워낙 이 작업을 매우 많이 해서 어지간한 색들의 색상코드는 거의 다 알고 있다고 해도 과언이 아니다. 실제로 작업하다 보면 자의 반 타의 반으로 외우게 된다.
3. 색상 확인 방법[편집]
이 문서에 수록된 색상과 헥스 코드보다 더 많은 정보를 얻고자 한다면 다음 링크에서 확인이 가능하다.
- CSS 색상명
- 컬러 피커
- imagecolorpicker
- Encycolorpedia.kr
- Color-Hex.com
- RGB Chart & Multi Tool
- HSL Color Picker: HSL 색 공간 기반이지만 헥스 코드도 따로 표시해주고, 원하는 헥스 코드를 직접 입력할 수도 있다.
- 구글에서 'color picker' 검색
- 네이버에서 '색상 팔레트' 검색: 세부적인 색상을 검색하기는 힘들다.
- 색상 추출
- 윈도우를 사용한다면 간단하게 그림판으로 이미지나 스크린샷을 띄운 후, 컬러 피커를 통해 색상을 골라낸 다음 사용자 지정색 선택 메뉴에서 ‘10진수 RGB 표현법’으로 된 색상 코드를 알 수 있다. 헥스 코드를 원할 경우 아래의 헥스 코드 변환 방법을 거치면 알 수 있다.
- 또는 Microsoft PowerToys를 설치한 다음 Color Picker 설정을 켜 [Win] + [Shift] + [C] 키를 누르면 창이 뜨면서 마우스 커서를 갖다댄 곳의 색상명을 표시해 준다. 또한 그 상태로 휠을 돌리면 확대할 수도 있다.
- 크롬을 사용할 경우 Eye Dropper이나 ColorPick Eyedropper라는 확장 프로그램을 사용해서 인터넷 사이트의 색을 쉽게 추출해 낼수 있다.
- Firefox, Internet Explorer의 경우 F12로 띄우는 콘솔 창에 색 추출 기능이 있고, 크롬의 경우 콘솔 창의 CSS 색상 선택기에 색 추출 기능이 있으며, 실시간으로 적용된 색을 미리 볼 수 있다.
- 개인이 만든 OiColorPicker 프로그램을 실행하고 마우스 커서를 알아내고 싶은 색 위에 놓으면 헥스코드가 나온다.
- 그 외에 어도비 포토샵, 어도비 일러스트레이터 등의 디자인 프로그램에도 당연히 컬러 피커가 존재한다. 역시 화면의 색상을 추출하는 것이 아닌 캔버스 내의 색상을 추출하는 것이기 때문에 원하는 이미지를 캔버스로 불러오면 된다.
- macOS에 기본으로 있는 디지털 컬러 측정기를 사용하고 일반 RGB로 표시 모드에서 색 위에 놓으면 RGB가 나온다.
- RGB에서 헥스 코드 변환
- 구글 검색창에서 ‘rgb R G B’ 검색하기. rgb 0 164 149 - Google 검색 반대의 경우나 그 외 다양한 단위변환도 가능하다.
- rapidtables.com
4. 나무위키에서[편집]
4.1. 색상 문법 적용 방법[편집]
자세한 내용은 나무위키:문법 도움말 문서를 참고하십시오.
4.2. 나무위키의 특수색[편집]
자세한 내용은 나무위키:문법 도움말 문서를 참고하십시오.
5. 색상 목록[편집]
5.1. CSS 색상[편집]
CSS Color Module Level 3 명세를 참고해도 된다. CSS 색상명은 대소문자를 구분하지 않지만 PascalCase(띄어쓰기 없이 모든 단어의 첫 글자를 대문자로 표기)로 표기하였고, 수록 순서는 다음과 같다.
- 무채색 → 유채색
- 무채색은 어두운 색을 먼저 수록한다.
- 유채색은 HSV 색 공간에서 색상(hue)값이 작은 순서, 색상값이 같다면 명도(value)가 큰 순서로 수록한다.
몇몇 색상은 이름이 여러 가지로 등록되어 있다. 특히 Gray/Grey가 들어간 색상은 어느 쪽을 써도 무방하다.
5.1.1. 기본 색[편집]
CSS 초기부터 정의되어 있던 색이다. 단, 이름이 여러 가지인 색 중
grey
, cyan
, magenta
는 CSS Color Module Level 3에서야 정의되었다.5.1.2. 무채색[편집]
5.1.3. 유채색[편집]
5.2. 전통색[편집]
5.2.1. 대한민국[편집]
1992년에 국립현대미술관에서 「한국전통표준색명 및 색상 제 2차 시안」을 발간했으며, 이 자료에서는 전통색을 90가지로 정리했다. 국립중앙도서관 전자도서관 목록에 금색도 포함되어 있지만 정리 자료에 따라 나타내지 않기도 한다. 같은 금속이지만 은색은 포함되지 않았다. 앞의 링크 자료를 봐도 금색 부분은 금박을 스캔한 듯한 것이 있기는 하나, 색상코드(먼셀)가 표기되진 않았다.
「한국전통표준색명 및 색상 제 2차 시안」에서는 남아있는 전통 색상 명칭을 가지고 추정했는데, 오방색, 두 가지 오방색으로 배합된 색명, 한 가지 오방색이 포함된 색명, 명암을 나타내는 색명, 채도를 나타내는 색명, 기억색명, 단청색명, 기타 특수용어로서 문헌 설명을 통해서만 알 수 있는 색깔로 나누어 추정했다고 밝혔다. 이외에도 염색재료, 염색방법, 경험자의 의견, 과거의 경험 등 가능한 많은 방법을 사용했다고 밝히고 있다.
전통색을 다룬 서적으로 한국의 전통색(문은배/안그라픽스)과 한국의 전통색(이재만/일진사)이 있다.
정리짤1
정리짤2
정리짤3
5.2.1.1. 무채색계[편집]
5.2.1.2. 적색계[편집]
5.2.1.3. 황색계[편집]
5.2.1.4. 청록색계[편집]
5.2.1.5. 자색계[편집]
5.3. 색으로 불리지만 색이 아닌 것[편집]
- 투명: 이 색을 표현하려면 RGB에 Alpha(투명도)를 추가한 RGBA를 가져와야 하며 현실에서는 모두 투과시킴을 의미한다. CSS에서는
로 투명을 설정할 수 있다.transparent
6. Hexspeak[편집]
'''[[커피|
#C0ffee
]]이나 [4] 보다시피 나무위키 하이퍼링크 색상은 순수 파랑이 아니다.[5] 버전 11에서 업데이트가 중지된 Internet Explorer는 지원하지 않는다.[6] 예를 들어 CSS에서는
rgb(255, 255, 0)
, hsl(60, 100%, 50%)
과 같은 표현도 있다.[7] 이름이 어원이 LA 다저스라고 한다.[8] 웹 개발자인 에릭 메이어(Eric Meyer)의 딸인 레베카가 생전에 좋아하던 색이었는데, 암으로 사망한 레베카를 추모하기 위해 CSS Color Module Level 4에 추가되었다. CodePen의 관련 글[9] 사전 상 의미는 '눈의 빛깔과 같은 흰색'이다. 완전한 흰색을 이렇게 표현하기도 했다.[10] 와전된 것으로 원래 훈색은 주황색이다. 똑같이 주황색 계열에서 분홍색 계열로 와전된 다홍색과 같은 사례. 아마 훈색으로 염색된 옷감이 색이 바래면서 분홍색이 되었을 것으로 추정.[11] 오방간색 중 하나인 유(騮)가 이 색으로 알려져 있지만 와전된 것으로 오방간색 유(騮)는 황갈색이다. 이쪽의 유는 '기름 유'로 말 그대로 기름색이라는 뜻.[12] '붉은 흙 자'자를 사용해 붉은빛을 띤 황색을 의미한다. 사전에서는 '자줏빛을 띤 노랑'이라 나오지만 이는 아래 '자황색(紫黃色)'의 설명에 더 부합한다.[13] 이쪽은 '자줏빛 자'를 사용한다.[14] 헥스코드로 금색은 #FFD700, 은색은 #C0C0C0, 황색은 #C88D0D이다.#DeadC0de
'''와 같이 특정 단어의 일부 문자들을 비슷해 보이는 16진 숫자들로 대체해 단어 코드를 만드는 것을 말한다. IPv6에서는 최대 32자리의 단어 코드들을 만들 수 있지만 헥스 코드에서는 16진수 3자리 혹은 6자리, ARGB까지 추가하면 4자리나 8자리의 단어 코드를 만들 수밖에 없는 제약이 있다.자세한 내용은 위키피디아의 Hexspeak 문서 참고.
7. 헥스 코드가 문서명인 문서[편집]
8. 그 외 색상 표현법[편집]
- 10진수 RGB 표현법: 위와 같이 'Red', 'Green', 'Blue'의 강도를 각각 표시하되 10진수로 풀어서 쓰는 방식. 헥스 코드 #7B2C43을 이 방식으로 나타내면
의 형식으로 표기할 수 있다. rgba를 써서 마지막에 투명값을 추가할 수 있는데, 이 경우 투명값은 0~1 사이를 소수점까지 이용해서 표현하거나 백분율(%)로 표기하여야 한다. 만약 투명값 45%를 쓴다면rgb(123,45,67)
나rgba(123,45,67,0.45)
로 쓰면 된다.rgba(123,45,67,45%)
- 10진수 HSV 표현법: 색도, 채도, 명도값을 이용하여 색을 표현하는 방식이다. 원통 좌표계를 이용한다. 색도는 원형이라 각도로 표기하고 채도와 명도는 백분율로 표기한다.
- CMYK 표현법: 프린터 잉크 색의 합성 등에 쓰이는 방식으로, 위와 달리 성분 색의 강도가 높을수록 어두워지는 감산 혼합 방식이다.
9. 기타[편집]
- 연예 기획사에선 공식색 충돌 논란을 미리 막기 위해 CMYK, RGB, 팬톤 컬러코드와 함께 공식색을 병기하는 용도로 쓰이기도 한다. 대표적인 케이스가 청하, JBJ.
- 일본에서 쓰이는 색상코드는 이 사이트에서 알아볼 수 있다.
- 해외의 자료로는 색과사전(ency'color'pedia)을 참고하면 좋다. 영어로 이름 붙여진 색들이 많다. 삼성 블루(Samsung blue) 등의 별의 별 색까지 헥스 코드 형태로 등록되었다. 한국어판도 존재하지만 다른 언어판에 비해 이름 붙여진 색이나, 색들의 정보는 매우 적다. 심지어 한국어판보다 이름 붙여진 색의 수가 적은 언어는 인도네시아어밖에 없다. 시 그린(Sea Green)을 해록색, 스프링 그린(Spring Green)을 춘록색 등으로 현지화하는 작업이라도 필요하겠지만, 위키위키 엔진처럼 누구나 편집할 수는 없다.
- 알파위키에서 다중 계정 검사를 할때, 보고서를 작성하는데 이때 사용되는 코드도 헥스 코드이다.
이 문서의 내용 중 전체 또는 일부는 2023-12-26 13:15:54에 나무위키 헥스 코드 문서에서 가져왔습니다.