본문 바로가기

디자인 정보

HTML 색상표 (Color Palette)

HTML 색상표 (Color Palette)

다양한 정보를 전달해 드리려고 노력하는 블로그!!!

글과 사진 및 이미지 ▶ CopyLeft(C)
◎CopyLeft(C) 는 공유는 하시되 복사 붙여넣기가 아니라 내용을 응용하여 작성해서 가져가셔야 된다는 걸 알려 드립니다.
◎사진과 이미지 일부는 퍼온 것도 있음을 밝힙니다.


목차


HTML 컬러 코드


HTML 컬러 코드는 웹상에서 볼 수 있는 컬러값을 말합니다. RGB, CMYK 등과 같이 웹에서 색을 표현하는 하나의 단위입니다.




위의 이미지에서 #포함된 문자와 숫자가 웹 색상 코드이다.

이번 글을 쓰게 된 이유는 글을 작성하면서 계속 포토샵이나 일러스트로 색을 찾아서 사용하는 것이 번거로워서 한 번에 보고 사용할 수 있게 하려는 의미도 있습니다.

HTML에서 컬러 코드를 사용하는 방법은 여러 가지가 있습니다.

블로그를 하면서 HTML에 대해서 처음 알게 되었는데, 정말 배움은 끝이 없다는 걸 다시 한번 느끼는 거 같습니다. 하나도 모르는 상태로 하나하나 찾아가며 배우는 게 쉽지 않은 거 같습니다.

  1. 웹 사이트에서 배경색을 설정할때
<body style="background:#코드색상">
  1. 웹 사이트에서 글자색을 설정할때
<span style="color:#코드색상">
  1. 웹 사이트에서 표 바탕색 설정할때
<table style="background:#코드색상">
  1. 웹 사이트에서 링크색 설정할때
<a style="color:#코드색상">

HTML 컬러 코드 표

 

 

#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

#3DFF92 #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

%23%20HTML%20%uC0C9%uC0C1%uD45C%20%28Color%20Palette%29%0A@%28%24.%uBE14%uB85C%uADF8%20%uC791%uC131%uC911%29%5BMarxico%2C%20%uD2F0%uC2A4%uD1A0%uB9AC%5D%20%0A%0A%3Cp%3E%3Cfont%20color%3D%22%23ffffff%22%3E%3Cspan%20style%3D%22background-color%3A%20rgb%280%2C%20153%2C%20153%29%3B%20color%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%uB2E4%uC591%uD55C%20%uC815%uBCF4%uB97C%20%uC804%uB2EC%uD574%20%uB4DC%uB9AC%uB824%uACE0%20%uB178%uB825%uD558%uB294%20%uBE14%uB85C%uADF8%21%21%21%3C/span%3E%3C/font%3E%3C/p%3E%0A%uAE00%uACFC%20%uC0AC%uC9C4%20%uBC0F%20%uC774%uBBF8%uC9C0%20%u25B6%20CopyLeft%28C%29%0A%u25CECopyLeft%28C%29%20%uB294%20%uACF5%uC720%uB294%20%uD558%uC2DC%uB418%20%uBCF5%uC0AC%20%uBD99%uC5EC%uB123%uAE30%uAC00%20%uC544%uB2C8%uB77C%20%uB0B4%uC6A9%uC744%20%uC751%uC6A9%uD558%uC5EC%20%uC791%uC131%uD574%uC11C%20%uAC00%uC838%uAC00%uC154%uC57C%20%uB41C%uB2E4%uB294%20%uAC78%20%uC54C%uB824%20%uB4DC%uB9BD%uB2C8%uB2E4.%20%0A%u25CE%uC0AC%uC9C4%uACFC%20%uC774%uBBF8%uC9C0%20%uC77C%uBD80%uB294%20%uD37C%uC628%20%uAC83%uB3C4%20%uC788%uC74C%uC744%20%uBC1D%uD799%uB2C8%uB2E4.%20%0A%0A---%0A%0A%23%23%20%uBAA9%uCC28%0A%5BTOC%5D%0A%0A---%0A%0A%23%23%23%20HTML%20%uCEEC%uB7EC%20%uCF54%uB4DC%0A%21%5BAlt%20text%5D%28./%uBE14%uB85C%uADF8%20%uB300%uD45C%uC774%uBBF8%uC9C011.jpg%29%0A%0AHTML%20%uCEEC%uB7EC%20%uCF54%uB4DC%uB294%20%uC6F9%uC0C1%uC5D0%uC11C%20%uBCFC%20%uC218%20%uC788%uB294%20%uCEEC%uB7EC%uAC12%uC744%20%uB9D0%uD569%uB2C8%uB2E4.%20RGB%2C%20CMYK%20%uB4F1%uACFC%20%uAC19%uC774%20%uC6F9%uC5D0%uC11C%20%uC0C9%uC744%20%uD45C%uD604%uD558%uB294%20%uD558%uB098%uC758%20%uB2E8%uC704%uC785%uB2C8%uB2E4.%20%0A%0A%21%5BAlt%20text%5D%28./20170419170427001.jpg%29%0A%3E%20%uC704%uC758%20%uC774%uBBF8%uC9C0%uC5D0%uC11C%20%23%uD3EC%uD568%uB41C%20%uBB38%uC790%uC640%20%uC22B%uC790%uAC00%20%uC6F9%20%uC0C9%uC0C1%20%20%uCF54%uB4DC%uC774%uB2E4.%0A%0A%uC774%uBC88%20%uAE00%uC744%20%uC4F0%uAC8C%20%uB41C%20%uC774%uC720%uB294%20%uAE00%uC744%20%uC791%uC131%uD558%uBA74%uC11C%20%uACC4%uC18D%20%uD3EC%uD1A0%uC0F5%uC774%uB098%20%uC77C%uB7EC%uC2A4%uD2B8%uB85C%20%uC0C9%uC744%20%uCC3E%uC544%uC11C%20%uC0AC%uC6A9%uD558%uB294%20%uAC83%uC774%20%uBC88%uAC70%uB85C%uC6CC%uC11C%20%uD55C%20%uBC88%uC5D0%20%uBCF4%uACE0%20%uC0AC%uC6A9%uD560%20%uC218%20%uC788%uAC8C%20%uD558%uB824%uB294%20%uC758%uBBF8%uB3C4%20%uC788%uC2B5%uB2C8%uB2E4.%20%0A%0AHTML%uC5D0%uC11C%20%uCEEC%uB7EC%20%uCF54%uB4DC%uB97C%20%uC0AC%uC6A9%uD558%uB294%20%uBC29%uBC95%uC740%20%uC5EC%uB7EC%20%uAC00%uC9C0%uAC00%20%uC788%uC2B5%uB2C8%uB2E4.%20%0A%0A%3E%20%uBE14%uB85C%uADF8%uB97C%20%uD558%uBA74%uC11C%20HTML%uC5D0%20%uB300%uD574%uC11C%20%uCC98%uC74C%20%uC54C%uAC8C%20%uB418%uC5C8%uB294%uB370%2C%20%uC815%uB9D0%20%uBC30%uC6C0%uC740%20%uB05D%uC774%20%uC5C6%uB2E4%uB294%20%uAC78%20%uB2E4%uC2DC%20%uD55C%uBC88%20%uB290%uB07C%uB294%20%uAC70%20%uAC19%uC2B5%uB2C8%uB2E4.%20%uD558%uB098%uB3C4%20%uBAA8%uB974%uB294%20%uC0C1%uD0DC%uB85C%20%uD558%uB098%uD558%uB098%20%uCC3E%uC544%uAC00%uBA70%20%uBC30%uC6B0%uB294%20%uAC8C%20%uC27D%uC9C0%20%uC54A%uC740%20%uAC70%20%uAC19%uC2B5%uB2C8%uB2E4.%20%20%0A%0A1.%20%uC6F9%20%uC0AC%uC774%uD2B8%uC5D0%uC11C%20%uBC30%uACBD%uC0C9%uC744%20%uC124%uC815%uD560%uB54C%0A%0A%60%60%60%0A%3Cbody%20style%3D%22background%3A%23%uCF54%uB4DC%uC0C9%uC0C1%22%3E%0A%60%60%60%0A%0A2.%20%uC6F9%20%uC0AC%uC774%uD2B8%uC5D0%uC11C%20%uAE00%uC790%uC0C9%uC744%20%uC124%uC815%uD560%uB54C%0A%0A%60%60%60%0A%3Cspan%20style%3D%22color%3A%23%uCF54%uB4DC%uC0C9%uC0C1%22%3E%0A%60%60%60%0A%0A3.%20%uC6F9%20%uC0AC%uC774%uD2B8%uC5D0%uC11C%20%uD45C%20%uBC14%uD0D5%uC0C9%20%uC124%uC815%uD560%uB54C%0A%0A%60%60%60%0A%3Ctable%20style%3D%22background%3A%23%uCF54%uB4DC%uC0C9%uC0C1%22%3E%0A%60%60%60%0A%0A4.%20%uC6F9%20%uC0AC%uC774%uD2B8%uC5D0%uC11C%20%uB9C1%uD06C%uC0C9%20%uC124%uC815%uD560%uB54C%0A%0A%60%60%60%0A%3Ca%20style%3D%22color%3A%23%uCF54%uB4DC%uC0C9%uC0C1%22%3E%0A%60%60%60%0A%0A%0A----------%0A%23%23%23%20HTML%20%uCEEC%uB7EC%20%uCF54%uB4DC%20%uD45C%0A%0A%0A%0A%0A%0A