본문 바로가기
  • 기록이 역사입니다-여수미술 아카이브
  • 세상과 소통하기 위한 문화예술
  • 행복한 삶을 위한 문화예술
■ 컴퓨터/홈피제작소스

웹칼라

by May born JCY 2008. 9. 17.



칼라란무엇인가?
칼라는 색, 색채, 빛깔을 의미하는데, 색이란 빛의 반사와 흡수의 결과로 눈에 느껴지는 사물의 밝음과 어둠, 빨강 파랑 노랑 등을 나타내는 물리적인 현상, 또는 빛에 의한 모든 물리적 현상을 나타내는 물감 등의 안료를 의미한다.
그 종류에는 스스로 빛을 발하는 자연광(햇빛)과 TV나 모니터 등에서 볼 수 있는 광원색, 물체에 반사 또는 투과되어 사물을 통해 전달되는 색인 물체색으로 크게 나누어진다.
그러므로 우리가 모니터에서 색을표시할 때는 광원색으로 전달되며, 이것은 또한 빨간색(Red), 녹색(Green), 파랑색(Blue)의 세가지 색을 기본으로 혼합되어 수많은 색이 표현되며, 여기서 세가지 색의 광원이 만나면 '흰색(White)'을 띠게 되지만 흰색을 색으로 인정하지 않으므로 이 체계를 'RGB'로 부르게 되었다.
이와 반대로 인쇄물상에 나타나는 색들은 인쇄염료를 사용하는 물체색에 해당되는 것으로 청록색(Cyan), 노랑색(Yellow), 자주색(Margenta)의 세가지 색이 혼합되어 수많은 색을 나타내게 되며 세가지 색이 합쳐질 때 '검정(Black)'이 되며, 이 색을 포함한 네가지 색으로 표시되는 색체계 방식을 'CMYK'라 한다.

웹 칼라 시스템이란?
웹 칼라는 모니터를 통해 보여지는 RGB 색체계 방식의 광원색이 주요 부분을 이루지만 프린트(인쇄)와 스캐너와 연결되기 때문에 물체색(CMYK)의 영향도 받는다.
이러한 이유로 웹 칼라는 동일한 색이라도 모니터 상에서는 다른 색으로 보이는 경우가 발생한다.

모니터의 종류에 따라 표준 칼라가 조금씩 차이가 난다.
컴퓨터의 비트의 심도에 따라 8비트와 24비트, 32비트로 칼라의 수가 다르게 나타난다.
컴퓨터 운영체제에 따른 시스템 팔레트의 차이
브라우저상의 고유한 팔레트로 인한 색상 재현 차이

이런 문제점에 대한 해결방안으로 216 웹 안전 칼라 시스템과 sRGB 칼라 시스템, ICC(International Color Consortium) 칼라 시스템을 만들게 되었다.

216 웹 안전 칼라 시스템
216 웹 안전 칼라 시스템(216 Web Safety Color System)이란 컴퓨터 운영체제의 종류와 비트, 심도, 브라우저의 종류가 달라지더라도 변하지 않는 공통으로 사용되는 안전한 색으로 이루어진 팔레트를 의미한다.
이는 빨강, 녹색, 파랑색이 서로 조합을 이루어 210가지의 유채색과 6가지의 무채색(흰색에서 검정색 사이에 들어가는 회색의 단계인 명도만을 가진 색)으로 총 216가지의 칼라 시스템을 만들어 내는 것이다.
216 웹 칼라 시스템의 팔레트는 넷스케이프, 익스플로러에 동일하게 적용되며, 만약 기본 팔레트에 해당하는 색상이 없으면 색상을 혼합하여 가장 비슷한 색을 만드는데 이를 디더링(Dithering) 기법이라고 한다.

sRGB
sRGB란 1996년 8월 5일에 마이크로소프트사와 휴렛팩커드사가 만든 색상 체계 표준안으로 CRT(Cathode Ray Tubes:컴퓨터 모니터)의 색상 교정을 설정하는데 있어, 거의 무한대로 조합할 수 있다는 것을 전제로 한다.
sRGB의 핵심 원리는 일반적인 모니터를 기준으로 한가지 교정 방식을 사용하여 CRT가 인식할 수 있는 정확한 색상을 반복적으로 표현하는 것인데, RGB보다 더 정밀한 색상 체계를 표현할 수 있으며 일반적으로 사용하는 모니터를 기준으로 설정하고 있으므로 대다수의 사용자들은 모니터 설정을 수정하지 않고 사용할 수 있다.
sRGB는 포토샵 프로그램에서 기본으로 셋팅하게 되므로, 기존의 매킨토시나 유닉스 사용자 이외에도 그래픽 작업을 하는 사람들이 주로 사용하게 되었다. 그러나 안타깝게도 포토샵이나 기타 sRGB 지원 시스템 사양 이외에는 나타나지 않는 단점이 있다.

ICC
ICC(International Color Consortium)는 어도비(Adobe), 아그파(Agfa), 애플(Apple), 코닥(Kodak), 마이크로소프트(Microsoft), SGI(Silicon Grphics, Inc:실리콘 그래픽스), SUN(썬:Sun Microsystems, Inc.) Taligent(탈리젠트) 사에서 제정한 29개의 다양한 소프트웨어와 하드웨어 공급업체들이 참여하고 있는 협회를 말한다.
이 협회의 목적은 장비와 플랫폼에 독립적인 색상 관리 시스템을 만들고 유지하는데 있다. 여기서 만든 색상관리 시스템이 바로 ICC CMS(Color Management Systems: 칼라 조정 시스템)이다.
어찌보면 ICC CMS는 sRGB와 목적이 유사하게 느껴질지 모르지만 방법은 서로 다르다.
sRGB는 CRT와 함께 화상(스크린: Screen)으로만 표현되는 색상 체계인 반면, ICC CMS는 모니터 뿐만 아니라 프린트에서의 색상 관리를 목표로 하여 이미지의 색상 특성을 정의하는 데이터로 파일포맷에 추가된다. 즉, 종이로 출력된 것과 모니터를 통해 표현되는 것을 동일하게 보이도록 이미지를 만드는 것이다.
그러나 ICC CMS는 문서의 파일 크기를 증가시키기 때문에 웹 전송을 위한 칼라 시스템으로서는 적합하지 않다.

Web color
#93DAFF#98DFFF#9DE4FF#A2E9FF#A7EEFF#ACF3FF#B0F7FF#B4FBFF#B9FFFF#C0FFFF
#87CEFA#91D8FA#A5D8FA#AFDDFA#B9E2FA#C3E7FA#CDECFA#D7F1FA#E1F6FA#EBFBFF
#00BFFF#0AC9FF#14D3FF#1EDDFF#28E7FF#32F1FF#3CFBFF#46FFFF#96FFFF#C8FFFF
#00A5FF#00AFFF#00B9FF#00C3FF#00CDFF#00D7FF#00E1FF#00EBFF#00F5FF#00FFFF
#1EA4FF#28AEFF#32B8FF#3CC2FF#46CCFF#50D6FF#5AE0FF#6EE0FF#6EEAFF#78F3FF
#1E90FF#289AFF#32A4FF#3CAEFF#46B8FF#50C2FF#5ACCFF#64D6FF#6EE0FF#78EAFF
#96A5FF#A0AFFF#AAB9FF#B4C3FF#BECDFF#C8D7FF#D2E1FF#DCEBFF#E8F5FF#F4FFFF
#86A5FF#90AFFF#9AB9FF#A4C3FF#AECDFF#B8D7FF#CCE1FF#E0EBFF#EBF5FF#F9FFFF
#6495ED#6E9FED#78A9ED#82B3ED#8CBDED#96C7ED#A0D1F7#AADBFF#B4E5FF#BEEFFF
#0078FF#0A82FF#148CFF#1E96FF#28A0FF#32AAFF#3CB4FF#46BEFF#50C8FF#5AD2FF
#0064FF#0A6EFF#1478FF#1E82FF#288CFF#3296FF#3CA0FF#46AAFF#50B4FF#5ABEFF
#0000FF#3232FF#5050FF#646EFF#6478FF#6482FF#648CFF#6496FF#64A0FF#64AAFF
#4169E1#4B73E1#557DE1#5F87E1#6991E1#739BE1#7DA5E1#87AFEB#91B9F5#9BC3FF
#0064CD#0A6ECD#1478CD#1E82CD#288CD2#3296D7#3CA0E1#46AAEB#50B4F5#5ABEF5
#5A5AFF#6464FF#6E6EFF#7878FF#8282FF#8C8CFF#A0A0FF#B4B4FF#C8C8FF#D2D2FF
#7B68EE#8572EE#8F7CEE#9986EE#A390EE#AD9AEE#B7A4EE#C1AEEE#CBB8EE#D5C2EE
#6A5ACD#7E6ECD#8878CD#9282CD#9C8CCD#A696CD#B0A0CD#BAAAD7#C4B4E1#CEBEE1
#0000CD#2828CD#4646CD#6464CD#6E6ED7#7878E1#8282EB#8C8CF5#9696FF#A0A0FF
#00008C#14148C#28288C#3C3C8C#50508C#646496#7878AA#8C8CBE#A0A0C8#B4B4DC
#483D8B#52478B#5C518B#665B8B#70658B#7A6F95#84799F#8E83A9#988DB3#A297BD
#000069#1E3269#323C73#3C467D#3C5087#3C5A91#46649B#506EA5#5A78AF#6482B9

#47FF9C#51FFA6#5BFFB0#65FFBA#6FFFC4#79FFCE#75FFCA#7AFFCF#7FFFD4
#55EE94#5FEE9E#69EEA8#73EEB2#7DEEBC#87EEC6#91F8D0#9BFFDA#A5FFE4#AFFFEE
#66CDAA#70D2B4#7AD7BE#84DCC8#8EE1D2#98EBDC#9DF0E1#A2F5E6#A7FAEB#ACFFEF
#AAEBAA#B4F0B4#BEF5BE#C8FAC8#D2FFD2#DCFFDC#E1FFE1#E6FFE6#EBFFEB#F0FFF0
#80E12A#8AE634#94EB3E#9EF048#A8F552#B2FA5C#BCFF66#C1FF6B#C6FF70#CBFF75
#52E252#5CE75C#66EC66#70F170#7AF67A#84FB84#89FB89#8EFB8E#93FB93#98FB98
#64CD3C#6ED746#78E150#82EB5A#8CF064#96F56E#9BFA73#A0FA78#A5FA7D#AAFA82
#13C7A3#18CCA8#1DD1AD#22D6B2#27DBB7#2CE0BC#31E0C1#36E0C6#3BE0CB#40E0D0
#46B4B4#50BEBE#5AC8C8#64D2D2#6EDCDC#73E1E1#78E6E6#7DEBEB#82F0F0#87F5F5
#20B2AA#2ABCB4#34C6BE#3ED0C8#48DAD2#52E4DC#57E9E1#5CEEE6#61F3EB#66F8F0
#5F9EA0#69A8AA#73B2B4#7DBCBE#87C6C8#91D0D2#96D5D7#9BDADC#A0DFE1#A5E3E6
#3CB371#46BD7B#50C785#5AD18F#64DB99#6EE5A3#73EAA8#78EFAD#7DF4B2#82F9B7
#2E8B57#389561#429F6B#4CA975#56B37F#60BD89#65C28E#6AC793#6FCC98#74D19D
#228B22#2C952C#369F36#40A940#4AB34A#54BD54#5EC75E#63CC63#68D168#6DD66D
#497649#538053#5D8A5D#679467#719E71#7BA87B#80AD80#85B285#8AB78A#8FBC8F
#006400#0A6E0A#147814#1E821E#288C28#329632#3CA03C#41A541#46AA46#4BAF4B
#008C8C#0A9696#14A0A0#1EAAAA#28B4B4#32BEBE#37C3C3#3CC8C8#41CDCD#46D2D2
#008080#0A8A8A#149494#1E9E9E#28A8A8#32B2B2#37B7B7#3CBCBC#41C1C1#46C6C6


#FFB6C1#FFBBC6#FFC0CB#FFC5D0#FFCAD5#FFCFDA#FFD4DF#FFD9E4#FFDEE9#FFE3EE
#FFAAAF#FFB4B9#FFBEC3#FFC8CD#FFD2D7#FFDCE1#FFE1E6#FFE6EB#FFEBF0#FFF0F5
#FF9E9B#FFA8A5#FFB2AF#FFBCB9#FFC6C3#FFD0CD#FFD5D2#FFDAD7#FFDFDC#FFE4E1
#FF7A85#FF848F#FF8E99#FF98A3#FFA2AD#FFACB7#FFB1BC#FFB6C1#FFBBC6#FFC0CB
#FF5675#FF607F#FF6A89#FF7493#FF7E9D#FF88A7#FF92B1#FF9CBB#FFA6C5#FFB0CF
#FF82FF#FF8CFF#FF96FF#FFA0FF#FFAAFF#FFB4FF#FFBEFF#FFC8FF#FFD2FF#FFDCFF
#FF7DB4#FF87BE#FF91C8#FF9BD2#FFA5DC#FFAFE6#FFB4EB#FFB9F0#FFBEF5#FFC3FA
#FF69B4#FF73BE#FF7DC8#FF87D2#FF91DC#FF9BE6#FFA5F0#FFAAF5#FFAFFA#FFB4FF
#FF1493#FF1E9D#FF28A7#FF32B1#FF3CBB#FF46C5#FF50CF#FF5AD9#FF64E3#FF6EED
#DB7093#DB7A9D#DB84A7#E08EB1#E598BB#EAA2C5#EAB1D4#EFACCF#F4BBDE#F4B6D9
#D7567F#DC6089#E16A93#E6749D#EB7EA7#F088B1#F592BB#FA9CC5#FFA6CF#FFB0D9
#C71585#C71F8F#C73399#C73DA3#CC47AD#D151B7#D65BC1#E065CB#EA6FD5#F479DF
#CD1039#CD1F48#CD2E57#CD3861#CD426B#D24C75#D7567F#DC6089#E16A93#E6749D
#B9062F#B91A4D#BE2457#C32E61#C8386B#CD4275#D24C7F#D75689#DC6093#E16A9D


#FAEB78#FAF082#FAF58C#FAFA96#FAFAA0#FAFAAA#FAFAB4#FAFABE#FAFAD2#FAFAD2
#FFDC3C#FFE146#FFE650#FFEB5A#FFF064#FFF56E#FFFA78#FFFA82#FFFF8C#FFFF96
#FFC81E#FFD228#FFD732#FFDC3C#FFE146#FFE650#FFEB5A#FFF064#FFF56E#FFF978
#FFB400#FFBE0A#FFC314#FFC81E#FFCD28#FFD232#FFD73C#FFDC46#FFE150#FFE65A
#FDCD8C#FDD296#FDD7A0#FDDCAA#FDE1B4#FDE6BE#FDEBC8#FDF5D2#FDF5DC#FDF5E6
#FAC87D#FACD87#FAD291#FAD79B#FADCA5#FAE1AF#FAE6B9#FAEBC3#FAEBCD#FAEBD7
#FFA500#FFAF0A#FFB914#FFC31E#FFCD28#FFD732#FFDC37#FFE13C#FFE641#FFEB46
#FF9100#FF9B00#FFA500#FFAF00#FFB900#FFC300#FFC800#FFCD00#FFD200#FFD700
#FF8200#FF8C0A#FF9614#FFA01E#FFAA28#FFB432#FFB937#FFBE3C#FFC341#FFC846
#FFA98F#FFB399#FFBDA3#FFC7AD#FFD1B7#FFDBC1#FFE0C6#FFE5CB#FFEAD0#FFEFD5
#FFA374#FFAD7E#FFB788#FFC192#FFCB9C#FFD0A1#FFD5A6#FFDAAB#FFDFB0#FFE4B5
#FF9473#FF9E7D#FFA887#FFB291#FFBC9B#FFC6A5#FFD0AF#FFD0AF#FFD5B4#FFDAB9
#FF7F50#FF895A#FF9364#FF9D6E#FFA778#FFB182#FFBB8C#FFC091#FFC596#FFCA9B
#CD853F#CD8F49#D29953#D7A35D#DCAD67#E1B771#E6C17B#EBC680#F0CB85#F5D08A
#D2691E#D27328#D27D32#D7873C#DC9146#E19B50#E6A55A#EBAA5F#EBAF64#F0B469
#AE5E1A#B86824#C2722E#CC7C38#D68642#E0904C#E59551#EA9A56#EF9F5B#F4A460
#8B4513#8B4F1D#8B5927#8B6331#906D3B#957745#9F814F#A48654#A98B59#AE905E


#FF9696#FFA0A0#FFAAAA#FFB4B4#FFBEBE#FFC8C8#FFD2D2#FFDCDC#FFE6E6#FFF0F0
#F08080#F08A8A#F09494#F59E9E#FAA8A8#FAB2B2#FAB7B7#FABCBC#FAC1C1#FAC6C6
#F56E6E#F57878#F58282#F58C8C#F59696#F5A0A0#F5AAAA#FAB4B4#FABEBE#FAC8C8
#F06464#F06E6E#F07878#F08282#F08C8C#F09696#F4A0A0#F4AAAA#F4B4B4#FEBEBE
#FF0000#FF3232#FF4646#FF5050#FF5A5A#FF6464#FF6E6E#FF7878#FF8282#FF8C8C
#EB0000#EB3232#EB4646#EB5050#EB5A5A#EB6464#F06E6E#F57878#FA8282#FA8C8C
#CD0000#CD3C3C#CD4646#CD5050#D25A5A#D76464#DC6E6E#E17878#E68282#EB8C8C
#CD5C5C#CD6666#CD7070#CD7A7A#D28484#D78E8E#DC9898#E6A2A2#EBACAC#F0B6B6
#B90000#B93232#B93C3C#B94646#B95050#BE5A5A#C35F5F#C86464#CD6969#D26E6E
#B22222#B24040#B24A4A#B25454#B75E5E#BC6868#C17272#CB7776#CB7C7C#D08180
#A52A2A#AA3E3E#AF4848#B45252#BE5C5C#C36666#CD7070#CD7A7A#D28484#D78E8E
#800000#803232#853C3C#8F4646#945050#9E5A5A#A36464#AD6E6E#B77878#C18282


#CD853F#CD8B45#CD904A#D2954F#D29A54#D79F59#D7A45E#E1A963#E1AE68#E6B36D
#DB631F#E56D29#E57733#EA813D#EF8B47#EF904C#F49551#F49A56#F49F5B#F4A460
#D2691E#D27328#D77D32#D7873C#DC9146#E19B50#E6A055#EBA55A#F0AA5F#F5AF64
#A0522D#A05C37#A06641#A5704B#AA7A55#B4845F#B98E69#C39873#CDA27D#D7AC87
#8B4513#8B4F1D#8B5927#8B6331#906D3B#9A7745#A4814F#AE8B59#B89563#C29F6D
#DA70D6#DF75DB#E47AE0#E97FE5#EE84EA#F389EF#F88EF4#FD93F9#FF98FE#FF9DFF
#BA55D3#BF5AD8#C45FDD#C964E2#CE69E7#D36EEC#D873F1#DD78F6#E27DFB#E782FF
#9932CC#9E37D1#A33CD6#A841DB#AD46E0#B24BE5#B750EA#BC55EF#C15AF4#C65FF9
#9400D3#9905D8#9E0ADD#A30FE2#A814E7#AD19EC#B21EF1#B723F6#BC28FB#C12DFF
#942894#9E329E#A83CA8#B246B2#BC50BC#C65AC6#D064D0#DA6EDA#E478E4#EE82EE
#8c008c#960a96#a014a0#aa1eaa#b428b4#be32be#c83cc8#d246d2#dc50dc#e65ae6
#800080#8a0a8a#941494#9e1e9e#a828a8#b232b2#bc3cbc#c646c6#d050d0#da5ada
#834683#8d508d#975a97#a164a1#ab6eab#b578b5#bf82bf#c98cc9#d396d3#dda0dd
#828282#8c8c8c#969696#a0a0a0#aaaaaa#b4b4b4#bebebe#c8c8c8#d2d2d2#dcdcdc
#000000#282828#323232#3c3c3c#464646#505050#5a5a5a#646464#6e6e6e#787878

컬러 이름

16진수

red#FF0000
crimson#DC143C
firebrick#B22222
maroon#800000
darkred#8B0000
brown#A52A2A
sienna#A0522D
saddlebrown#8B4513
indianred#CD5C5C
rosybrown#BC8F8F
lightcoral#F08080
salmon#FA8072
darksalmon#E9967A
coral#FF7F50
tomato#FF6347
sandybrown#F4A460
lightsalmon#FFA07A
peru#CD853F
chocolate#D2691E
orangered#FF4500
orange#FFA500
darkorange#FF8C00
tan#D2B48C
peachpuff#FFDAB9
bisque#FFE4C4
moccasin#FFE4B5
navajowhite#FFDEAD
wheat#F5DEB3
burlywood#DEB887
darkgoldenrod#B8860B
goldenrod#DAA520
gold#FFD700
yellow#FFFF00
lightgoldenrodyellow#FAFAD2
palegoldenrod#EEE8AA
khaki#F0E68C
darkkhaki#BDB76B
lawngreen#7CFC00
greenyellow#ADFF2F
chartreuse#7FFF00
lime#00FF00
limegreen#32CD32
yellowgreen#9ACD32
olive#808000
olivedrab#6B8E23
darkolivegreen#556B2F
forestgreen#228B22
darkgreen#006400
green#008000
seagreen#2E8B57
mediumseagreen#3CB371
darkseagreen#8FBC8F
lightgreen#90EE90
palegreen#98FB98
springgreen#00FF7F
mediumspringgreen#00FA9A
teal#008080
darkcyan#008B8B
lightseagreen#20B2AA
mediumaquamarine#66CDAA
cadetblue#5F9EA0
steelblue#4682B4
aquamarine#7FFFD4
powderblue#B0E0E6
paleturquoise#AFEEEE
lightblue#ADD8E6
lightsteelblue#B0C4DE
skyblue#87CEEB
lightskyblue#87CEFA
mediumturquoise#48D1CC
turquoise#40E0D0
darkturquoise#00CED1
aqua#00FFFF
cyan#00FFFF
deepskyblue#00BFFF
dodgerblue#1E90FF
cornflowerblue#6495ED
royalblue#4169E1
blue#0000FF
mediumblue#0000CD
navy#000080
darkblue#00008B
midnightblue#191970
darkslateblue#483D8B
slateblue#6A5ACD
mediumslateblue#7B68EE
mediumpurple#9370DB
darkorchid#9932CC
darkviolet#9400D3
blueviolet#8A2BE2
mediumorchid#BA55D3
plum#DDA0DD
lavender#E6E6FA
thistle#D8BFD8
orchid#DA70D6
violet#EE82EE
indigo#4B0082
darkmagenta#8B008B
purple#800080
mediumvioletred#C71585
deeppink#FF1493
fuchsia#FF00FF
magenta#FF00FF
hotpink#FF69B4
palevioletred#DB7093
lightpink#FFB6C1
pink#FFC0CB
mistyrose#FFE4E1
blanchedalmond#FFEBCD
lightyellow#FFFFE0
cornsilk#FFF8DC
antiquewhite#FAEBD7
papayawhip#FFEFD5
lemonchiffon#FFFACD
beige#F5F5DC
linen#FAF0E6
oldlace#FDF5E6
lightcyan#E0FFFF
aliceblue#F0F8FF
whitesmoke#F5F5F5
lavenderblush#FFF0F5
floralwhite#FFFAF0
mintcream#F5FFFA
ghostwhite#F8F8FF
honeydew#F0FFF0
seashell#FFF5EE
ivory#FFFFF0
azure#F0FFFF
snow#FFFAFA
white#FFFFFF
gainsboro#DCDCDC
lightgrey#D3D3D3
silver#C0C0C0
darkgray#A9A9A9
lightslategray#778899
slategray#708090
gray#808080
dimgray#696969
darkslategray#2F4F4F
black#000000

'■ 컴퓨터 > 홈피제작소스' 카테고리의 다른 글

◈ 태그가 뭔데?  (1) 2005.07.09
◈ 기초태그 모음 #3  (1) 2005.07.09
◈ 기초태그 모음 #2  (1) 2005.07.09
◈ 기초태그모음 #1  (2) 2005.07.09
HTML 색-코드  (0) 2005.07.09

댓글