디자인 부산

컬러팔레트 스타일

작성자

Jiwoon Kim

카테고리:

RoleHexRGBHSLHCTPantone
Color 1ffffff255, 255, 2550, 0%, 100%
Light Bge0e5ed224, 229, 237217, 27%, 90%246.65629350300986
8.084374548601643
90.78005899837862
Separatorsc6cdd7198, 205, 215215, 18%, 81%247.80345679354633
9.754628580222557
82.14957619129383
Light Text838383131, 131, 1310, 0%, 51%209.4937811084095
1.922378435997762
54.75842810014477
Primary Color00539b0, 83, 155208, 100%, 30%259.5761585191324
48.88743555776696
35.10915257840184		Princess Blue
Paragraphs47515871, 81, 88205, 11%, 31%235.13136716702655
10.269247337324531
33.834647959444
Light Dark Background2d353e45, 53, 62212, 16%, 21%249.17174742576688
10.832165242934895
21.769727167717917
Primary Dark171b2123, 27, 33216, 18%, 11%256.0568838514451
7.6546902596849575
9.607813932028378
Grunge Bgd7d8d3215, 216, 21172, 6%, 84%
Pink Bge8dbe8232, 219, 232300, 22%, 88%
f7caca247, 202, 2020, 74%, 88%Rose Quartz
93a9d1147, 169, 209219, 40%, 70%Serenity
6c2832108, 40, 50351, 46%, 29%Pomegranate
Primary-project50132d80, 19, 45334, 62%, 19%
f5edd6245, 237, 21445, 61%, 90%Papyrus
Night10101416, 16, 20240, 11%, 7%282.38596189174245
4.765346290337379
4.7987433382833835
fec14f254, 193, 7939, 99%, 65%Daffodil
Lavenderd4c2e6212, 194, 230270, 42%, 83%

아래는 토널 팔레트(Hex, RGB, HSL) 표입니다.
(Material Design 3 기준 예시 색상을 참고하여 구성했습니다. 실제 사용 시 디자인 시스템에 맞게 조정 필요)

Primary Colors (#283364)

Princess Blue(00539B), ,

ToneHexRGBHSL
2001315e1, 49, 94209, 98%, 19%
3022487634, 72, 118213, 55%, 30%
40#3d5f9061, 95, 144215, 40%, 40%
80#a6c8ff166, 200, 255217, 100%, 83%
90#d4e3ff212, 227, 255219, 100%, 92%
100#ffffff255, 255, 2550, 0%, 100%

Secondary Colors

ToneHexRGBHSL
20#27314139, 49, 65217, 25%, 20%
30#3d475861, 71, 88218, 18%, 29%
40#555f7185, 95, 113219, 14%, 39%
80#bcc7dc188, 199, 220219, 31%, 80%
90#d8e3f8216, 227, 248219, 70%, 91%
100#

Tertiary Colors

Serenity

ToneHexRGBHSL
20#
30#
40#
80#
90#
100#

Neutral-Variant

ToneHexRGBHSL
30#42475166, 71, 81220, 10%, 29%
50#727782114, 119, 130221, 7%, 48%
60#8c919c140, 145, 156221, 7%, 58%
80#c2c6d2194, 198, 210225, 15%, 79%
90#dee2ef222, 226, 239226, 35%, 90%

Neutral

컬러 타입Light 모드Dark 모드
Surface Dimneutral87d9dae0neutral6
Surfaceneutral98f9f9ffneutral6111318
Surface Brightneutral98neutral2437393e
Surface Container Lowestneutral100ffffffneutral40c0e13
Surface Container Lowneutral96f2f3faneutral10191c20
Surface Containerneutral94ededf4neutral121d2025
Surface Container Highneutral92e7e8eeneutral17282a2f
Surface Container Highestneutral90e1e2e9neutral2232353a
On Surfaceneutral10191c20neutral90e1e2e9
On Surface Variantneutral30424751neutral80c2c6d2
Outlineneutral-variant50727782neutral-variant608c919c
Outline Variantneutral-variant80c2c6d2neutral-variant30424751
Inverse Surfaceneutral202e3036neutral90e1e2e9
Inverse On Surfaceneutral95f0f0f7neutral202e3036
ToneHexRGBHSL
0#0000000°, 0%, 0%
4#0c0e1312, 14, 19223, 23%, 6%
6#11131817, 19, 24223, 17%, 8%
10#191c2025, 28, 32214, 12%, 11%
12#1d202529, 32, 37218, 12%, 13%
17#282a2f40, 42, 47223, 8%, 17%
20#2e303646, 48, 54225, 8%, 20%
22#32353a50, 53, 58217, 7%, 21%
24#37393e55, 57, 62223, 6%, 23%
87#d9dae0217, 218, 224231, 10%, 86%
90#e1e2e9225, 226, 233233, 15%, 90%
92#e7e8ee231, 232, 238231, 17%, 92%
94#ededf4237, 237, 244240, 24%, 94%
95#f0f0f7240, 240, 247240, 30%, 95%
96#f2f3fa242, 243, 250233, 44%, 96%
98#f9f9ff249, 249, 255240, 100%, 99%
100#FFFFFF0°, 0%, 100%

참고 사항

  1. Hex/RGB/HSL은 예시 값이며, 실제 프로젝트에 맞게 조정해야 합니다.
  2. Neutral 계열은 검정(0)에서 흰색(100)까지 명도 단계를 미세하게 조절한 그레이 스케일입니다.
  3. Primary/Secondary/Tertiary는 각각 파란색/초록색/보라색 계열로 가정하고 생성했습니다.
  4. 정확한 색상은 디자인 시스템 툴(예: Figma, Adobe Color)을 통해 확인하는 것이 좋습니다.
TonerolePrimarySecondaryNeutral-VariantNeutral
100Color 1#FFFFFF
98#f9f9ff
96#f2f3fa
95#f0f0f7
94Surface Container #ededf4
92#e7e8ee
90Surface Container Highest
Surface Variant
Light Bg		#d4e3ffd8e3f8#dee2ef#e1e2e9
87#d9dae0
80Outline Variant
Separators		#a6c8ff#bcc7dc#c2c6d2
60Outline-dark
Light Text		#8c919c
50#727782
40#3d5f90#555f71
30On Primary Container/ On Surface Variant/ Paragraphs224876#3d4758#424751
24#37393e
22#32353a
20Inverse Surface
Light Dark Background		01315e#273141#2e3036
17#282a2f
12#1d2025
10On Surface
Primary Dark		#191c20
6#111318
4Night#0c0e13
0#000000

아래는 주어진 요구사항에 따른 컬러 팔레트 표입니다. 카테고리, 역할, 라이트/다크 모드 토큰을 정리했습니다.

Baseline Color Tokens Table

CategoryColor RoleLight Mode TokenDark Mode Token
Primary Colors
Primarymd.ref.palette.primary40md.ref.palette.primary80
On Primarymd.ref.palette.primary100md.ref.palette.primary20
Primary Containermd.ref.palette.primary90md.ref.palette.primary30
On Primary Containermd.ref.palette.primary30md.ref.palette.primary90
Secondary Colors
Secondarymd.ref.palette.secondary40md.ref.palette.secondary80
On Secondarymd.ref.palette.secondary100md.ref.palette.secondary20
Secondary Containermd.ref.palette.secondary90md.ref.palette.secondary30
On Secondary Containermd.ref.palette.secondary30md.ref.palette.secondary90
Tertiary Colors
Tertiarymd.ref.palette.tertiary40md.ref.palette.tertiary80
On Tertiarymd.ref.palette.tertiary100md.ref.palette.tertiary20
Tertiary Containermd.ref.palette.tertiary90md.ref.palette.tertiary30
On Tertiary Containermd.ref.palette.tertiary30md.ref.palette.tertiary90
Surface Colors
Surfacemd.ref.palette.neutral98md.ref.palette.neutral6
On Surfacemd.ref.palette.neutral10md.ref.palette.neutral90
Surface Variantmd.ref.palette.neutral-variant90md.ref.palette.neutral-variant30
On Surface Variantmd.ref.palette.neutral-variant30md.ref.palette.neutral-variant80
Surface Container Highestmd.ref.palette.neutral90md.ref.palette.neutral22
Surface Container Highmd.ref.palette.neutral92md.ref.palette.neutral17
Surface Containermd.ref.palette.neutral94md.ref.palette.neutral12
Surface Container Lowmd.ref.palette.neutral96md.ref.palette.neutral10
Surface Container Lowestmd.ref.palette.neutral100md.ref.palette.neutral4
Inverse Surfacemd.ref.palette.neutral20md.ref.palette.neutral90
Inverse On Surfacemd.ref.palette.neutral95md.ref.palette.neutral20
Surface Tintmd.ref.palette.primary40md.ref.palette.primary80
Outline Colors
Outlinemd.ref.palette.neutral-variant50md.ref.palette.neutral-variant60
Outline Variantmd.ref.palette.neutral-variant80md.ref.palette.neutral-variant30
Add-ons
Add-on PrimaryInverse Primarymd.ref.palette.primary80md.ref.palette.primary40
Add-on SurfaceSurface Brightmd.ref.palette.neutral98md.ref.palette.neutral24
Surface Dimmd.ref.palette.neutral87md.ref.palette.neutral6
Scrimmd.ref.palette.neutral0md.ref.palette.neutral0
Shadowmd.ref.palette.neutral0md.ref.palette.neutral0

설명

  • Non-dynamic, 3P (Primary, Secondary, Tertiary), Light/Dark 기준으로 구성된 정적 토큰입니다.
  • Light/Dark 모드별로 대비를 충족하는 색상 조합이 정의되어 있습니다 (예: On Primary는 Primary 색상 위에 표시되는 텍스트/아이콘용).
  • Surface Containers는 컴포넌트의 계층 구조를 구분하기 위한 미묘한 명도 차이를 제공합니다.
  • Scrim과 Shadow는 모든 모드에서 neutral0으로 통일되어 있습니다.

blue

namehexrgbhslhct
Maximum Blue PurpleA9B6F7169, 182, 247230, 83%, 82%276.4372107478387
37.75090215662494
75.20574973611537
Serenity93a9d1147, 169, 209219, 40%, 70%261.5749734609542
28.14936590424306
68.88320495496716
Cerulean Frost678FC1103, 143, 193213, 42%, 58%255.6228513919742
36.57627390160807
58.39481709344838
Princess Blue00539b0, 83, 155208, 100%, 30%259.5761585191324
48.88743555776696
35.10915257840184
Traditional Indigo27478839, 71, 136220, 55%, 34%268.66017208142705
43.05877936982836
31.149992246393467
Indigo (Rainbow)28336440, 51, 100229, 43%, 27%276.8156616960044
34.20757859820254
22.788657035115328
toneRoleHexRGBHSLHCT
100Color 1ffffff255, 255, 2550, 0%, 100%
90dee4ed222, 228, 237216, 29%, 90%246.82575521661025
8.889307200612501
90.3817952506473
80bec7cf190, 199, 207208, 15%, 78%236.9811130479229
9.633179658964632
79.78368194270189
6086929D134, 146, 157209, 11%, 57%
506f7880111, 120, 128208, 7%, 47%239.6709479505185
9.983147833351333
49.94298779403151
3042485066, 72, 80214, 10%, 29%251.23475403936482
9.181032076344657
30.332640176167722
222e353d46, 53, 61212, 14%, 21%248.99433980799301
9.82570020030251
21.81371688379705
10181b2124, 27, 33216, 18%, 11%261.73682385279903
7.271462739215634
9.702923462647309
40D0E1413, 14, 20231, 21%, 6%276.7803118061492
6.927457510315978
4.066172740005399
variant ToneHexRGBHSLhct
30#42475166, 71, 81220, 10%, 29%260.6442724436324
10.117563644621734
30.056246283939522
50#727782114, 119, 130221, 7%, 48%260.14657008467174
10.16870258692928
49.957107278606685
60#8c919c140, 145, 156221, 7%, 58%258.825436335841
9.949845893534608
60.092859881347636
80#c2c6d2194, 198, 210225, 15%, 79%261.4366989077844
9.897741528670764
79.90356287016316
90#dee2ef222, 226, 239226, 35%, 90%261.94131556032255
10.285375036590759
89.93093487208543
ToneHexRGBHSLhct
0#0000000°, 0%, 0%
4#0c0e1312, 14, 19223, 23%, 6%266.3693106350583
6.303181742145059
3.96778115359351
6#11131817, 19, 24223, 17%, 8%265.6584476253923
6.215536348237545
5.879223750862831
10#191c2025, 28, 32214, 12%, 11%251.37420082873905
5.685042867732513
10.118340171260943
12#1d202529, 32, 37218, 12%, 13%256.76829973987356
6.408031674220678
12.141531333041339
17#282a2f40, 42, 47223, 8%, 17%262.70393443507294
5.903723806647528
17.047467749172725
20#2e303646, 48, 54225, 8%, 20%265.828599987413
6.625419264174757
19.88738378668674
22#32353a50, 53, 58217, 7%, 21%254.50077395201217
6.193433890346933
22.051769424116117
24#37393e55, 57, 62223, 6%, 23%260.94745363119415
5.771302636639093
23.95465428353709
87#d9dae0217, 218, 224231, 10%, 86%256.5379721454502
5.7580639217132585
87.13221998795737
90#e1e2e9225, 226, 233233, 15%, 90%259.45640601992784
6.304297213562886
89.9907853298179
92#e7e8ee231, 232, 238231, 17%, 92%255.47339833341982
5.767149117693067
92.07612671678775
94#ededf4237, 237, 244240, 24%, 94%263.759075641992
6.033829466186348
93.92815003575696
95#f0f0f7240, 240, 247240, 30%, 95%263.5229908992587
6.0330806129826255
94.97571841035172
96#f2f3fa242, 243, 250233, 44%, 96%258.2502700735819
6.302262880837417
95.94720148751138
98#f9f9ff249, 249, 255240, 100%, 99%259.59165958294506
5.48587928376701
98.0779543488225
100#FFFFFF0°, 0%, 100%

코멘트

댓글 남기기

더 많은 게시물

디자인 부산에서 더 알아보기

지금 구독하여 계속 읽고 전체 아카이브에 액세스하세요.

계속 읽기