디자인 부산

[태그:] 678FC1

  • 컬러팔레트 스타일

    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%