에이엔텍

Easy Stack Document

CSS color Property

뉴트럴(Neutral) 계열 (중립 색상군)

White(화이트), Black(블랙), Gray(그레이), Beige(베이지), Brown(브라운), Khaki(카키), Moss(모스) 등

화이트, 횐색

--cose-white

100

200

300

400

500

600

700

800

900

블랙, 검정/흑색

100

200

300

400

--cose-black

500

600

700

800

900

슬레이트, 회청색/암회색

100

200

300

400

--cose-slate

500

600

700

800

900

그레이, 회색

100

200

300

400

--cose-gray

500

600

700

800

900

스톤, 회갈색/흙빛 그레이

100

200

300

400

--cose-stone

500

600

700

800

900

Red(레드) 계열

Scarlet(스칼렛), Crimson(크림슨), Rose(로즈), Coral(코랄), Tomato(토마토), Brick(브릭), Burgundy(버건디), Wine(와인) 등

레드, 빨강/적색

100

200

300

400

--cose-red

500

600

700

800

900

로즈, 장밋빛/로즈핑크

100

200

300

400

--cose-rose

500

600

700

800

900

핑크, 분홍

100

200

300

400

--cose-pink

500

600

700

800

900

퓨시아, 자홍/마젠타 계열

100

200

300

400

--cose-fuchsia

500

600

700

800

900

Orange(오렌지) 계열

Amber(앰버), Tangerine(탠저린), Apricot(애프리컷), Peach(피치), Carrot(캐럿), Pumpkin(펌프킨), Rust(러스트), Terracotta(테라코타) 등

오렌지, 주황

100

200

300

400

--cose-orange

500

600

700

800

900

앰버, 호박색

100

200

300

400

--cose-amber

500

600

700

800

900

Yellow(옐로우) 계열

Lemon(레몬), Gold(골드), Amber(앰버), Mustard(머스타드), Canary(캐너리), Ochre(오커), Maize(메이즈), Cream(크림) 등

옐로, 노랑/황색

100

200

300

400

--cose-yellow

500

600

700

800

900

Brown(브라운) 계열

Tan(탠), Beige(베이지), Sand(샌드), Caramel(카라멜), Chestnut(체스트넛), Chocolate(초콜릿), Walnut(월넛), Umber(엄버) 등

브라운, 갈색

100

200

300

400

--cose-brown

500

600

700

800

900

Green(그린) 계열

Lime(라임), Mint(민트), Jade(제이드), Emerald(에메랄드), Sage(세이지), Olive(올리브), Moss(모스), Forest(포레스트)

그린, 초록/녹색

100

200

300

400

--cose-green

500

600

700

800

900

라임, 연두

100

200

300

400

--cose-lime

500

600

700

800

900

민트, 파스텔 청록

100

200

300

400

--cose-mint

500

600

700

800

900

틸, 짙은 청록

100

200

300

400

--cose-teal

500

600

700

800

900

Blue(블루) 계열

Sky(스카이), Cyan(시안), Azure(아주르), Cerulean(세룰리언), Cobalt(코발트), Royal(로열 블루), Navy(네이비), Indigo(인디고) 등

블루, 파랑/청색

100

200

300

400

--cose-blue

500

600

700

800

900

시안, 밝은 청록

100

200

300

400

--cose-cyan

500

600

700

800

900

스카이, 하늘색

100

200

300

400

--cose-sky

500

600

700

800

900

인디고, 남색

100

200

300

400

--cose-indigo

500

600

700

800

900

네이비, 곤색/감색

100

200

300

400

--cose-navy

500

600

700

800

900

Purple(퍼플) 계열

Lavender(라벤더), Lilac(라일락), Violet(바이올렛), Amethyst(자수정), Orchid(오키드), Plum(플럼), Grape(그레이프), Eggplant(가지색) 등

퍼플, 보라/자주 계열

100

200

300

400

--cose-purple

500

600

700

800

900

:root {
    --cose-white:#FFFFFF;
    --cose-white-100:#FFFFFF;
    --cose-white-200:#FFFFFF;
    --cose-white-300:#FFFFFF;
    --cose-white-400:#FFFFFF;
    --cose-white-500:#EEEEEE;
    --cose-white-600:#DEDEDE;
    --cose-white-700:#BEBEBE;
    --cose-white-800:#9E9E9E;
    --cose-white-900:#636363;
    --cose-white-rgb:255, 255, 255;
    --cose-white-rgb-100:255, 255, 255;
    --cose-white-rgb-200:255, 255, 255;
    --cose-white-rgb-300:255, 255, 255;
    --cose-white-rgb-400:255, 255, 255;
    --cose-white-rgb-500:238, 238, 238;
    --cose-white-rgb-600:222, 222, 222;
    --cose-white-rgb-700:190, 190, 190;
    --cose-white-rgb-800:158, 158, 158;
    --cose-white-rgb-900:99, 99, 99;
    --cose-black:#141F2C;
    --cose-black-100:#F2F2F3;
    --cose-black-200:#E4E6E8;
    --cose-black-300:#BDC1C5;
    --cose-black-400:#27323E;
    --cose-black-500:#121C28;
    --cose-black-600:#101925;
    --cose-black-700:#0C141E;
    --cose-black-800:#080F17;
    --cose-black-900:#03060A;
    --cose-black-rgb:20, 31, 44;
    --cose-black-rgb-100:242, 242, 243;
    --cose-black-rgb-200:228, 230, 232;
    --cose-black-rgb-300:189, 193, 197;
    --cose-black-rgb-400:39, 50, 62;
    --cose-black-rgb-500:18, 28, 40;
    --cose-black-rgb-600:16, 25, 37;
    --cose-black-rgb-700:12, 20, 30;
    --cose-black-rgb-800:8, 15, 23;
    --cose-black-rgb-900:3, 6, 10;
    --cose-slate:#334155;
    --cose-slate-100:#F4F5F6;
    --cose-slate-200:#E8EAED;
    --cose-slate-300:#C7CCD2;
    --cose-slate-400:#455265;
    --cose-slate-500:#2F3C4F;
    --cose-slate-600:#2B3749;
    --cose-slate-700:#232E3D;
    --cose-slate-800:#1C2531;
    --cose-slate-900:#0D131C;
    --cose-slate-rgb:51, 65, 85;
    --cose-slate-rgb-100:244, 245, 246;
    --cose-slate-rgb-200:232, 234, 237;
    --cose-slate-rgb-300:199, 204, 210;
    --cose-slate-rgb-400:69, 82, 101;
    --cose-slate-rgb-500:47, 60, 79;
    --cose-slate-rgb-600:43, 55, 73;
    --cose-slate-rgb-700:35, 46, 61;
    --cose-slate-rgb-800:28, 37, 49;
    --cose-slate-rgb-900:13, 19, 28;
    --cose-gray:#667085;
    --cose-gray-100:#F7F7F9;
    --cose-gray-200:#EFF0F2;
    --cose-gray-300:#D7D9DF;
    --cose-gray-400:#747D91;
    --cose-gray-500:#5F687C;
    --cose-gray-600:#586073;
    --cose-gray-700:#4A5161;
    --cose-gray-800:#3C4350;
    --cose-gray-900:#232730;
    --cose-gray-rgb:102, 112, 133;
    --cose-gray-rgb-100:247, 247, 249;
    --cose-gray-rgb-200:239, 240, 242;
    --cose-gray-rgb-300:215, 217, 223;
    --cose-gray-rgb-400:116, 125, 145;
    --cose-gray-rgb-500:95, 104, 124;
    --cose-gray-rgb-600:88, 96, 115;
    --cose-gray-rgb-700:74, 81, 97;
    --cose-gray-rgb-800:60, 67, 80;
    --cose-gray-rgb-900:35, 39, 48;
    --cose-stone:#78716C;
    --cose-stone-100:#F8F7F7;
    --cose-stone-200:#F1F0EF;
    --cose-stone-300:#DCDAD8;
    --cose-stone-400:#857E7A;
    --cose-stone-500:#706964;
    --cose-stone-600:#67615D;
    --cose-stone-700:#57524E;
    --cose-stone-800:#484340;
    --cose-stone-900:#2A2725;
    --cose-stone-rgb:120, 113, 108;
    --cose-stone-rgb-100:248, 247, 247;
    --cose-stone-rgb-200:241, 240, 239;
    --cose-stone-rgb-300:220, 218, 216;
    --cose-stone-rgb-400:133, 126, 122;
    --cose-stone-rgb-500:112, 105, 100;
    --cose-stone-rgb-600:103, 97, 93;
    --cose-stone-rgb-700:87, 82, 78;
    --cose-stone-rgb-800:72, 67, 64;
    --cose-stone-rgb-900:42, 39, 37;
    --cose-red:#DC2626;
    --cose-red-100:#FFF5F4;
    --cose-red-200:#FFECE9;
    --cose-red-300:#FECFC9;
    --cose-red-400:#E3473F;
    --cose-red-500:#CD2323;
    --cose-red-600:#BF2020;
    --cose-red-700:#A31919;
    --cose-red-800:#881313;
    --cose-red-900:#540808;
    --cose-red-rgb:220, 38, 38;
    --cose-red-rgb-100:255, 245, 244;
    --cose-red-rgb-200:255, 236, 233;
    --cose-red-rgb-300:254, 207, 201;
    --cose-red-rgb-400:227, 71, 63;
    --cose-red-rgb-500:205, 35, 35;
    --cose-red-rgb-600:191, 32, 32;
    --cose-red-rgb-700:163, 25, 25;
    --cose-red-rgb-800:136, 19, 19;
    --cose-red-rgb-900:84, 8, 8;
    --cose-rose:#F43F5E;
    --cose-rose-100:#FFF6F7;
    --cose-rose-200:#FFEEEE;
    --cose-rose-300:#FFD4D5;
    --cose-rose-400:#F8596D;
    --cose-rose-500:#E43A57;
    --cose-rose-600:#D43551;
    --cose-rose-700:#B52C44;
    --cose-rose-800:#972337;
    --cose-rose-900:#5E121F;
    --cose-rose-rgb:244, 63, 94;
    --cose-rose-rgb-100:255, 246, 247;
    --cose-rose-rgb-200:255, 238, 238;
    --cose-rose-rgb-300:255, 212, 213;
    --cose-rose-rgb-400:248, 89, 109;
    --cose-rose-rgb-500:228, 58, 87;
    --cose-rose-rgb-600:212, 53, 81;
    --cose-rose-rgb-700:181, 44, 68;
    --cose-rose-rgb-800:151, 35, 55;
    --cose-rose-rgb-900:94, 18, 31;
    --cose-pink:#EC4899;
    --cose-pink-100:#FFF7FA;
    --cose-pink-200:#FFEEF4;
    --cose-pink-300:#FFD5E5;
    --cose-pink-400:#F15FA3;
    --cose-pink-500:#DC438F;
    --cose-pink-600:#CD3D84;
    --cose-pink-700:#AF3370;
    --cose-pink-800:#92295D;
    --cose-pink-900:#5B1638;
    --cose-pink-rgb:236, 72, 153;
    --cose-pink-rgb-100:255, 247, 250;
    --cose-pink-rgb-200:255, 238, 244;
    --cose-pink-rgb-300:255, 213, 229;
    --cose-pink-rgb-400:241, 95, 163;
    --cose-pink-rgb-500:220, 67, 143;
    --cose-pink-rgb-600:205, 61, 132;
    --cose-pink-rgb-700:175, 51, 112;
    --cose-pink-rgb-800:146, 41, 93;
    --cose-pink-rgb-900:91, 22, 56;
    --cose-fuchsia:#D946EF;
    --cose-fuchsia-100:#FEF7FF;
    --cose-fuchsia-200:#FDEFFF;
    --cose-fuchsia-300:#F9D6FE;
    --cose-fuchsia-400:#DE5FF2;
    --cose-fuchsia-500:#CB41DF;
    --cose-fuchsia-600:#BC3CD0;
    --cose-fuchsia-700:#A132B1;
    --cose-fuchsia-800:#862894;
    --cose-fuchsia-900:#53155C;
    --cose-fuchsia-rgb:217, 70, 239;
    --cose-fuchsia-rgb-100:254, 247, 255;
    --cose-fuchsia-rgb-200:253, 239, 255;
    --cose-fuchsia-rgb-300:249, 214, 254;
    --cose-fuchsia-rgb-400:222, 95, 242;
    --cose-fuchsia-rgb-500:203, 65, 223;
    --cose-fuchsia-rgb-600:188, 60, 208;
    --cose-fuchsia-rgb-700:161, 50, 177;
    --cose-fuchsia-rgb-800:134, 40, 148;
    --cose-fuchsia-rgb-900:83, 21, 92;
    --cose-orange:#F97316;
    --cose-orange-100:#FFF8F5;
    --cose-orange-200:#FFF2EB;
    --cose-orange-300:#FFDECC;
    --cose-orange-400:#FC833E;
    --cose-orange-500:#E96B14;
    --cose-orange-600:#D96312;
    --cose-orange-700:#B9540D;
    --cose-orange-800:#9A4509;
    --cose-orange-900:#612803;
    --cose-orange-rgb:249, 115, 22;
    --cose-orange-rgb-100:255, 248, 245;
    --cose-orange-rgb-200:255, 242, 235;
    --cose-orange-rgb-300:255, 222, 204;
    --cose-orange-rgb-400:252, 131, 62;
    --cose-orange-rgb-500:233, 107, 20;
    --cose-orange-rgb-600:217, 99, 18;
    --cose-orange-rgb-700:185, 84, 13;
    --cose-orange-rgb-800:154, 69, 9;
    --cose-orange-rgb-900:97, 40, 3;
    --cose-amber:#F59E0B;
    --cose-amber-100:#FFFAF5;
    --cose-amber-200:#FFF6EC;
    --cose-amber-300:#FEE8CF;
    --cose-amber-400:#F7A83F;
    --cose-amber-500:#E59309;
    --cose-amber-600:#D58908;
    --cose-amber-700:#B67406;
    --cose-amber-800:#986004;
    --cose-amber-900:#5F3A01;
    --cose-amber-rgb:245, 158, 11;
    --cose-amber-rgb-100:255, 250, 245;
    --cose-amber-rgb-200:255, 246, 236;
    --cose-amber-rgb-300:254, 232, 207;
    --cose-amber-rgb-400:247, 168, 63;
    --cose-amber-rgb-500:229, 147, 9;
    --cose-amber-rgb-600:213, 137, 8;
    --cose-amber-rgb-700:182, 116, 6;
    --cose-amber-rgb-800:152, 96, 4;
    --cose-amber-rgb-900:95, 58, 1;
    --cose-yellow:#FCCE00;
    --cose-yellow-100:#FFFDF6;
    --cose-yellow-200:#FFFBEE;
    --cose-yellow-300:#FEF4D3;
    --cose-yellow-400:#FCD344;
    --cose-yellow-500:#EBC000;
    --cose-yellow-600:#DBB300;
    --cose-yellow-700:#BB9800;
    --cose-yellow-800:#9C7F00;
    --cose-yellow-900:#624E00;
    --cose-yellow-rgb:252, 206, 0;
    --cose-yellow-rgb-100:255, 253, 246;
    --cose-yellow-rgb-200:255, 251, 238;
    --cose-yellow-rgb-300:254, 244, 211;
    --cose-yellow-rgb-400:252, 211, 68;
    --cose-yellow-rgb-500:235, 192, 0;
    --cose-yellow-rgb-600:219, 179, 0;
    --cose-yellow-rgb-700:187, 152, 0;
    --cose-yellow-rgb-800:156, 127, 0;
    --cose-yellow-rgb-900:98, 78, 0;
    --cose-brown:#92400E;
    --cose-brown-100:#FAF5F3;
    --cose-brown-200:#F5EBE7;
    --cose-brown-300:#E6CEC3;
    --cose-brown-400:#9E532D;
    --cose-brown-500:#883B0C;
    --cose-brown-600:#7E360B;
    --cose-brown-700:#6B2D07;
    --cose-brown-800:#582405;
    --cose-brown-900:#351302;
    --cose-brown-rgb:146, 64, 14;
    --cose-brown-rgb-100:250, 245, 243;
    --cose-brown-rgb-200:245, 235, 231;
    --cose-brown-rgb-300:230, 206, 195;
    --cose-brown-rgb-400:158, 83, 45;
    --cose-brown-rgb-500:136, 59, 12;
    --cose-brown-rgb-600:126, 54, 11;
    --cose-brown-rgb-700:107, 45, 7;
    --cose-brown-rgb-800:88, 36, 5;
    --cose-brown-rgb-900:53, 19, 2;
    --cose-green:#22C55E;
    --cose-green-100:#F6FCF7;
    --cose-green-200:#EDFAEF;
    --cose-green-300:#D3F2D7;
    --cose-green-400:#4ACB6F;
    --cose-green-500:#1FB857;
    --cose-green-600:#1CAB51;
    --cose-green-700:#169244;
    --cose-green-800:#117937;
    --cose-green-900:#074B1F;
    --cose-green-rgb:34, 197, 94;
    --cose-green-rgb-100:246, 252, 247;
    --cose-green-rgb-200:237, 250, 239;
    --cose-green-rgb-300:211, 242, 215;
    --cose-green-rgb-400:74, 203, 111;
    --cose-green-rgb-500:31, 184, 87;
    --cose-green-rgb-600:28, 171, 81;
    --cose-green-rgb-700:22, 146, 68;
    --cose-green-rgb-800:17, 121, 55;
    --cose-green-rgb-900:7, 75, 31;
    --cose-lime:#84CC16;
    --cose-lime-100:#F9FDF6;
    --cose-lime-200:#F3FAEC;
    --cose-lime-300:#E0F3D0;
    --cose-lime-400:#90D243;
    --cose-lime-500:#7BBE14;
    --cose-lime-600:#72B112;
    --cose-lime-700:#60970D;
    --cose-lime-800:#4F7E09;
    --cose-lime-900:#2F4E03;
    --cose-lime-rgb:132, 204, 22;
    --cose-lime-rgb-100:249, 253, 246;
    --cose-lime-rgb-200:243, 250, 236;
    --cose-lime-rgb-300:224, 243, 208;
    --cose-lime-rgb-400:144, 210, 67;
    --cose-lime-rgb-500:123, 190, 20;
    --cose-lime-rgb-600:114, 177, 18;
    --cose-lime-rgb-700:96, 151, 13;
    --cose-lime-rgb-800:79, 126, 9;
    --cose-lime-rgb-900:47, 78, 3;
    --cose-mint:#2DD4BF;
    --cose-mint-100:#F7FDFC;
    --cose-mint-200:#EFFBF8;
    --cose-mint-300:#D6F5EF;
    --cose-mint-400:#53D9C5;
    --cose-mint-500:#29C6B2;
    --cose-mint-600:#26B8A6;
    --cose-mint-700:#1F9D8D;
    --cose-mint-800:#188375;
    --cose-mint-900:#0B5148;
    --cose-mint-rgb:45, 212, 191;
    --cose-mint-rgb-100:247, 253, 252;
    --cose-mint-rgb-200:239, 251, 248;
    --cose-mint-rgb-300:214, 245, 239;
    --cose-mint-rgb-400:83, 217, 197;
    --cose-mint-rgb-500:41, 198, 178;
    --cose-mint-rgb-600:38, 184, 166;
    --cose-mint-rgb-700:31, 157, 141;
    --cose-mint-rgb-800:24, 131, 117;
    --cose-mint-rgb-900:11, 81, 72;
    --cose-teal:#14B8A6;
    --cose-teal-100:#F6FCFA;
    --cose-teal-200:#EDF8F6;
    --cose-teal-300:#D1EEE8;
    --cose-teal-400:#44BFAF;
    --cose-teal-500:#12AC9B;
    --cose-teal-600:#10A090;
    --cose-teal-700:#0C887A;
    --cose-teal-800:#087165;
    --cose-teal-900:#03453E;
    --cose-teal-rgb:20, 184, 166;
    --cose-teal-rgb-100:246, 252, 250;
    --cose-teal-rgb-200:237, 248, 246;
    --cose-teal-rgb-300:209, 238, 232;
    --cose-teal-rgb-400:68, 191, 175;
    --cose-teal-rgb-500:18, 172, 155;
    --cose-teal-rgb-600:16, 160, 144;
    --cose-teal-rgb-700:12, 136, 122;
    --cose-teal-rgb-800:8, 113, 101;
    --cose-teal-rgb-900:3, 69, 62;
    --cose-blue:#2563EB;
    --cose-blue-100:#F4F8FF;
    --cose-blue-200:#E8F0FF;
    --cose-blue-300:#C7DAFE;
    --cose-blue-400:#3B75EF;
    --cose-blue-500:#225CDC;
    --cose-blue-600:#1F55CC;
    --cose-blue-700:#1947AE;
    --cose-blue-800:#133A91;
    --cose-blue-900:#08215B;
    --cose-blue-rgb:37, 99, 235;
    --cose-blue-rgb-100:244, 248, 255;
    --cose-blue-rgb-200:232, 240, 255;
    --cose-blue-rgb-300:199, 218, 254;
    --cose-blue-rgb-400:59, 117, 239;
    --cose-blue-rgb-500:34, 92, 220;
    --cose-blue-rgb-600:31, 85, 204;
    --cose-blue-rgb-700:25, 71, 174;
    --cose-blue-rgb-800:19, 58, 145;
    --cose-blue-rgb-900:8, 33, 91;
    --cose-cyan:#06B6D4;
    --cose-cyan-100:#F6FBFD;
    --cose-cyan-200:#EDF8FB;
    --cose-cyan-300:#D1EDF5;
    --cose-cyan-400:#41BED9;
    --cose-cyan-500:#05AAC6;
    --cose-cyan-600:#049EB8;
    --cose-cyan-700:#03869D;
    --cose-cyan-800:#026F83;
    --cose-cyan-900:#014451;
    --cose-cyan-rgb:6, 182, 212;
    --cose-cyan-rgb-100:246, 251, 253;
    --cose-cyan-rgb-200:237, 248, 251;
    --cose-cyan-rgb-300:209, 237, 245;
    --cose-cyan-rgb-400:65, 190, 217;
    --cose-cyan-rgb-500:5, 170, 198;
    --cose-cyan-rgb-600:4, 158, 184;
    --cose-cyan-rgb-700:3, 134, 157;
    --cose-cyan-rgb-800:2, 111, 131;
    --cose-cyan-rgb-900:1, 68, 81;
    --cose-sky:#0EA5E9;
    --cose-sky-100:#F5FBFE;
    --cose-sky-200:#ECF6FE;
    --cose-sky-300:#CFE9FB;
    --cose-sky-400:#3FAEEC;
    --cose-sky-500:#0C9ADA;
    --cose-sky-600:#0B8FCB;
    --cose-sky-700:#0779AD;
    --cose-sky-800:#056590;
    --cose-sky-900:#023D5A;
    --cose-sky-rgb:14, 165, 233;
    --cose-sky-rgb-100:245, 251, 254;
    --cose-sky-rgb-200:236, 246, 254;
    --cose-sky-rgb-300:207, 233, 251;
    --cose-sky-rgb-400:63, 174, 236;
    --cose-sky-rgb-500:12, 154, 218;
    --cose-sky-rgb-600:11, 143, 203;
    --cose-sky-rgb-700:7, 121, 173;
    --cose-sky-rgb-800:5, 101, 144;
    --cose-sky-rgb-900:2, 61, 90;
    --cose-indigo:#6366F1;
    --cose-indigo-100:#F6F8FF;
    --cose-indigo-200:#EDF0FF;
    --cose-indigo-300:#D4DAFF;
    --cose-indigo-400:#7077F4;
    --cose-indigo-500:#5C5FE1;
    --cose-indigo-600:#5558D2;
    --cose-indigo-700:#474AB3;
    --cose-indigo-800:#3A3C95;
    --cose-indigo-900:#21235D;
    --cose-indigo-rgb:99, 102, 241;
    --cose-indigo-rgb-100:246, 248, 255;
    --cose-indigo-rgb-200:237, 240, 255;
    --cose-indigo-rgb-300:212, 218, 255;
    --cose-indigo-rgb-400:112, 119, 244;
    --cose-indigo-rgb-500:92, 95, 225;
    --cose-indigo-rgb-600:85, 88, 210;
    --cose-indigo-rgb-700:71, 74, 179;
    --cose-indigo-rgb-800:58, 60, 149;
    --cose-indigo-rgb-900:33, 35, 93;
    --cose-navy:#1E3A8A;
    --cose-navy-100:#F2F5FA;
    --cose-navy-200:#E6EBF4;
    --cose-navy-300:#C1CCE3;
    --cose-navy-400:#314E97;
    --cose-navy-500:#1B3681;
    --cose-navy-600:#193177;
    --cose-navy-700:#132865;
    --cose-navy-800:#0E2053;
    --cose-navy-900:#051032;
    --cose-navy-rgb:30, 58, 138;
    --cose-navy-rgb-100:242, 245, 250;
    --cose-navy-rgb-200:230, 235, 244;
    --cose-navy-rgb-300:193, 204, 227;
    --cose-navy-rgb-400:49, 78, 151;
    --cose-navy-rgb-500:27, 54, 129;
    --cose-navy-rgb-600:25, 49, 119;
    --cose-navy-rgb-700:19, 40, 101;
    --cose-navy-rgb-800:14, 32, 83;
    --cose-navy-rgb-900:5, 16, 50;
    --cose-purple:#7C3AED;
    --cose-purple-100:#F7F6FF;
    --cose-purple-200:#F0EDFF;
    --cose-purple-300:#DAD2FF;
    --cose-purple-400:#8755F1;
    --cose-purple-500:#7336DD;
    --cose-purple-600:#6B31CE;
    --cose-purple-700:#5A28B0;
    --cose-purple-800:#4A2093;
    --cose-purple-900:#2C105C;
    --cose-purple-rgb:124, 58, 237;
    --cose-purple-rgb-100:247, 246, 255;
    --cose-purple-rgb-200:240, 237, 255;
    --cose-purple-rgb-300:218, 210, 255;
    --cose-purple-rgb-400:135, 85, 241;
    --cose-purple-rgb-500:115, 54, 221;
    --cose-purple-rgb-600:107, 49, 206;
    --cose-purple-rgb-700:90, 40, 176;
    --cose-purple-rgb-800:74, 32, 147;
    --cose-purple-rgb-900:44, 16, 92;
}

Color Set

<div class="cose-text-black">text color</div>
<div class="cose-text-black-600">text weight</div>
<div class="cose-text-black text-shadow">text shadow</div>

화이트, 횐색

white

100

200

300

400

500

600

700

800

900

가나다

white

100

200

300

400

500

600

700

800

900

가나다

블랙, 검정/흑색

black

100

200

300

400

500

600

700

800

900

가나다

black

100

200

300

400

500

600

700

800

900

가나다

슬레이트, 회청색/암회색

slate

100

200

300

400

500

600

700

800

900

가나다

slate

100

200

300

400

500

600

700

800

900

가나다

그레이, 회색

gray

100

200

300

400

500

600

700

800

900

가나다

gray

100

200

300

400

500

600

700

800

900

가나다

스톤, 회갈색/흙빛 그레이

stone

100

200

300

400

500

600

700

800

900

가나다

stone

100

200

300

400

500

600

700

800

900

가나다

레드, 빨강/적색

red

100

200

300

400

500

600

700

800

900

가나다

red

100

200

300

400

500

600

700

800

900

가나다

로즈, 장밋빛/로즈핑크

rose

100

200

300

400

500

600

700

800

900

가나다

rose

100

200

300

400

500

600

700

800

900

가나다

핑크, 분홍

pink

100

200

300

400

500

600

700

800

900

가나다

pink

100

200

300

400

500

600

700

800

900

가나다

퓨시아, 자홍/마젠타 계열

fuchsia

100

200

300

400

500

600

700

800

900

가나다

fuchsia

100

200

300

400

500

600

700

800

900

가나다

오렌지, 주황

orange

100

200

300

400

500

600

700

800

900

가나다

orange

100

200

300

400

500

600

700

800

900

가나다

앰버, 호박색

amber

100

200

300

400

500

600

700

800

900

가나다

amber

100

200

300

400

500

600

700

800

900

가나다

옐로, 노랑/황색

yellow

100

200

300

400

500

600

700

800

900

가나다

yellow

100

200

300

400

500

600

700

800

900

가나다

브라운, 갈색

brown

100

200

300

400

500

600

700

800

900

가나다

brown

100

200

300

400

500

600

700

800

900

가나다

그린, 초록/녹색

green

100

200

300

400

500

600

700

800

900

가나다

green

100

200

300

400

500

600

700

800

900

가나다

라임, 연두

lime

100

200

300

400

500

600

700

800

900

가나다

lime

100

200

300

400

500

600

700

800

900

가나다

민트, 파스텔 청록

mint

100

200

300

400

500

600

700

800

900

가나다

mint

100

200

300

400

500

600

700

800

900

가나다

틸, 짙은 청록

teal

100

200

300

400

500

600

700

800

900

가나다

teal

100

200

300

400

500

600

700

800

900

가나다

블루, 파랑/청색

blue

100

200

300

400

500

600

700

800

900

가나다

blue

100

200

300

400

500

600

700

800

900

가나다

시안, 밝은 청록

cyan

100

200

300

400

500

600

700

800

900

가나다

cyan

100

200

300

400

500

600

700

800

900

가나다

스카이, 하늘색

sky

100

200

300

400

500

600

700

800

900

가나다

sky

100

200

300

400

500

600

700

800

900

가나다

인디고, 남색

indigo

100

200

300

400

500

600

700

800

900

가나다

indigo

100

200

300

400

500

600

700

800

900

가나다

네이비, 곤색/감색

navy

100

200

300

400

500

600

700

800

900

가나다

navy

100

200

300

400

500

600

700

800

900

가나다

퍼플, 보라/자주 계열

purple

100

200

300

400

500

600

700

800

900

가나다

purple

100

200

300

400

500

600

700

800

900

가나다

<div class="cose-bg-black">background color</div>
<div class="cose-bg-black bg-shadow">box shadow</div>
<div class="cose-bg-black-gr">gradient</div>

화이트, 횐색

white

100

200

300

400

500

600

700

800

900

white

100

200

300

400

500

600

700

800

900

블랙, 검정/흑색

black

100

200

300

400

500

600

700

800

900

black

100

200

300

400

500

600

700

800

900

black

슬레이트, 회청색/암회색

slate

100

200

300

400

500

600

700

800

900

slate

100

200

300

400

500

600

700

800

900

slate

그레이, 회색

gray

100

200

300

400

500

600

700

800

900

gray

100

200

300

400

500

600

700

800

900

gray

스톤, 회갈색/흙빛 그레이

stone

100

200

300

400

500

600

700

800

900

stone

100

200

300

400

500

600

700

800

900

stone

레드, 빨강/적색

red

100

200

300

400

500

600

700

800

900

red

100

200

300

400

500

600

700

800

900

red

로즈, 장밋빛/로즈핑크

rose

100

200

300

400

500

600

700

800

900

rose

100

200

300

400

500

600

700

800

900

rose

핑크, 분홍

pink

100

200

300

400

500

600

700

800

900

pink

100

200

300

400

500

600

700

800

900

pink

퓨시아, 자홍/마젠타 계열

fuchsia

100

200

300

400

500

600

700

800

900

fuchsia

100

200

300

400

500

600

700

800

900

fuchsia

오렌지, 주황

orange

100

200

300

400

500

600

700

800

900

orange

100

200

300

400

500

600

700

800

900

orange

앰버, 호박색

amber

100

200

300

400

500

600

700

800

900

amber

100

200

300

400

500

600

700

800

900

amber

옐로, 노랑/황색

yellow

100

200

300

400

500

600

700

800

900

yellow

100

200

300

400

500

600

700

800

900

yellow

브라운, 갈색

brown

100

200

300

400

500

600

700

800

900

brown

100

200

300

400

500

600

700

800

900

brown

그린, 초록/녹색

green

100

200

300

400

500

600

700

800

900

green

100

200

300

400

500

600

700

800

900

green

라임, 연두

lime

100

200

300

400

500

600

700

800

900

lime

100

200

300

400

500

600

700

800

900

lime

민트, 파스텔 청록

mint

100

200

300

400

500

600

700

800

900

mint

100

200

300

400

500

600

700

800

900

mint

틸, 짙은 청록

teal

100

200

300

400

500

600

700

800

900

teal

100

200

300

400

500

600

700

800

900

teal

블루, 파랑/청색

blue

100

200

300

400

500

600

700

800

900

blue

100

200

300

400

500

600

700

800

900

blue

시안, 밝은 청록

cyan

100

200

300

400

500

600

700

800

900

cyan

100

200

300

400

500

600

700

800

900

cyan

스카이, 하늘색

sky

100

200

300

400

500

600

700

800

900

sky

100

200

300

400

500

600

700

800

900

sky

인디고, 남색

indigo

100

200

300

400

500

600

700

800

900

indigo

100

200

300

400

500

600

700

800

900

indigo

네이비, 곤색/감색

navy

100

200

300

400

500

600

700

800

900

navy

100

200

300

400

500

600

700

800

900

navy

퍼플, 보라/자주 계열

purple

100

200

300

400

500

600

700

800

900

purple

100

200

300

400

500

600

700

800

900

purple

<div class="border cose-bd-black">border color</div>
<div class="border cose-bd-das-black">border style</div>
<div class="border cose-bd-das-black border-2">border width</div>
<div class="border-bottom cose-bd-black bd-shadow">border shadow</div>

shadow

shadow 구성 아래(bottom), 좌(start), 우(end) 적용 가능 (border-bottom, border-start, border-end)

bd-shadow

width

border-2

border-3

border-4

border-5

solid

cose-bd-white

100

200

300

400

500

600

700

800

900

cose-bd-black

100

200

300

400

500

600

700

800

900

cose-bd-slate

100

200

300

400

500

600

700

800

900

cose-bd-gray

100

200

300

400

500

600

700

800

900

cose-bd-stone

100

200

300

400

500

600

700

800

900

cose-bd-red

100

200

300

400

500

600

700

800

900

cose-bd-rose

100

200

300

400

500

600

700

800

900

cose-bd-pink

100

200

300

400

500

600

700

800

900

cose-bd-fuchsia

100

200

300

400

500

600

700

800

900

cose-bd-orange

100

200

300

400

500

600

700

800

900

cose-bd-amber

100

200

300

400

500

600

700

800

900

cose-bd-yellow

100

200

300

400

500

600

700

800

900

cose-bd-brown

100

200

300

400

500

600

700

800

900

cose-bd-green

100

200

300

400

500

600

700

800

900

cose-bd-lime

100

200

300

400

500

600

700

800

900

cose-bd-mint

100

200

300

400

500

600

700

800

900

cose-bd-teal

100

200

300

400

500

600

700

800

900

cose-bd-blue

100

200

300

400

500

600

700

800

900

cose-bd-cyan

100

200

300

400

500

600

700

800

900

cose-bd-sky

100

200

300

400

500

600

700

800

900

cose-bd-indigo

100

200

300

400

500

600

700

800

900

cose-bd-navy

100

200

300

400

500

600

700

800

900

cose-bd-purple

100

200

300

400

500

600

700

800

900

dashed

cose-bd-das-white

100

200

300

400

500

600

700

800

900

cose-bd-das-black

100

200

300

400

500

600

700

800

900

cose-bd-das-slate

100

200

300

400

500

600

700

800

900

cose-bd-das-gray

100

200

300

400

500

600

700

800

900

cose-bd-das-stone

100

200

300

400

500

600

700

800

900

cose-bd-das-red

100

200

300

400

500

600

700

800

900

cose-bd-das-rose

100

200

300

400

500

600

700

800

900

cose-bd-das-pink

100

200

300

400

500

600

700

800

900

cose-bd-das-fuchsia

100

200

300

400

500

600

700

800

900

cose-bd-das-orange

100

200

300

400

500

600

700

800

900

cose-bd-das-amber

100

200

300

400

500

600

700

800

900

cose-bd-das-yellow

100

200

300

400

500

600

700

800

900

cose-bd-das-brown

100

200

300

400

500

600

700

800

900

cose-bd-das-green

100

200

300

400

500

600

700

800

900

cose-bd-das-lime

100

200

300

400

500

600

700

800

900

cose-bd-das-mint

100

200

300

400

500

600

700

800

900

cose-bd-das-teal

100

200

300

400

500

600

700

800

900

cose-bd-das-blue

100

200

300

400

500

600

700

800

900

cose-bd-das-cyan

100

200

300

400

500

600

700

800

900

cose-bd-das-sky

100

200

300

400

500

600

700

800

900

cose-bd-das-indigo

100

200

300

400

500

600

700

800

900

cose-bd-das-navy

100

200

300

400

500

600

700

800

900

cose-bd-das-purple

100

200

300

400

500

600

700

800

900

dotted

cose-bd-dot-white

100

200

300

400

500

600

700

800

900

cose-bd-dot-black

100

200

300

400

500

600

700

800

900

cose-bd-dot-slate

100

200

300

400

500

600

700

800

900

cose-bd-dot-gray

100

200

300

400

500

600

700

800

900

cose-bd-dot-stone

100

200

300

400

500

600

700

800

900

cose-bd-dot-red

100

200

300

400

500

600

700

800

900

cose-bd-dot-rose

100

200

300

400

500

600

700

800

900

cose-bd-dot-pink

100

200

300

400

500

600

700

800

900

cose-bd-dot-fuchsia

100

200

300

400

500

600

700

800

900

cose-bd-dot-orange

100

200

300

400

500

600

700

800

900

cose-bd-dot-amber

100

200

300

400

500

600

700

800

900

cose-bd-dot-yellow

100

200

300

400

500

600

700

800

900

cose-bd-dot-brown

100

200

300

400

500

600

700

800

900

cose-bd-dot-green

100

200

300

400

500

600

700

800

900

cose-bd-dot-lime

100

200

300

400

500

600

700

800

900

cose-bd-dot-mint

100

200

300

400

500

600

700

800

900

cose-bd-dot-teal

100

200

300

400

500

600

700

800

900

cose-bd-dot-blue

100

200

300

400

500

600

700

800

900

cose-bd-dot-cyan

100

200

300

400

500

600

700

800

900

cose-bd-dot-sky

100

200

300

400

500

600

700

800

900

cose-bd-dot-indigo

100

200

300

400

500

600

700

800

900

cose-bd-dot-navy

100

200

300

400

500

600

700

800

900

cose-bd-dot-purple

100

200

300

400

500

600

700

800

900

double

cose-bd-dou-white

100

200

300

400

500

600

700

800

900

cose-bd-dou-black

100

200

300

400

500

600

700

800

900

cose-bd-dou-slate

100

200

300

400

500

600

700

800

900

cose-bd-dou-gray

100

200

300

400

500

600

700

800

900

cose-bd-dou-stone

100

200

300

400

500

600

700

800

900

cose-bd-dou-red

100

200

300

400

500

600

700

800

900

cose-bd-dou-rose

100

200

300

400

500

600

700

800

900

cose-bd-dou-pink

100

200

300

400

500

600

700

800

900

cose-bd-dou-fuchsia

100

200

300

400

500

600

700

800

900

cose-bd-dou-orange

100

200

300

400

500

600

700

800

900

cose-bd-dou-amber

100

200

300

400

500

600

700

800

900

cose-bd-dou-yellow

100

200

300

400

500

600

700

800

900

cose-bd-dou-brown

100

200

300

400

500

600

700

800

900

cose-bd-dou-green

100

200

300

400

500

600

700

800

900

cose-bd-dou-lime

100

200

300

400

500

600

700

800

900

cose-bd-dou-mint

100

200

300

400

500

600

700

800

900

cose-bd-dou-teal

100

200

300

400

500

600

700

800

900

cose-bd-dou-blue

100

200

300

400

500

600

700

800

900

cose-bd-dou-cyan

100

200

300

400

500

600

700

800

900

cose-bd-dou-sky

100

200

300

400

500

600

700

800

900

cose-bd-dou-indigo

100

200

300

400

500

600

700

800

900

cose-bd-dou-navy

100

200

300

400

500

600

700

800

900

cose-bd-dou-purple

100

200

300

400

500

600

700

800

900

.visually-hidden 부트스트랩 5 에서 스크린 리더 전용 콘텐츠를 시각적으로 숨기면서 접근성을 유지하는 클래스.
aria-disabled="true" disabled 시 스크린 리더에 비활성화 상태 명시 (disabled 속성만으로도 접근성을 지원하지만 명확성 강화 또는 오류 시 사용)

<button type="button" class="btn cose-btn-black" aria-label="스크린리더 (버튼 텍스트와 동일하거나 보완 설명)" aria-describedby="#targetID">버튼</button>
<span id="targetID" class="visually-hidden">aria-describedby 지정 스크린 리더 (추가 설명)</span>

화이트, 횐색

블랙, 검정/흑색

슬레이트, 회청색/암회색

그레이, 회색

스톤, 회갈색/흙빛 그레이

레드, 빨강/적색

로즈, 장밋빛/로즈핑크

핑크, 분홍

퓨시아, 자홍/마젠타 계열

오렌지, 주황

앰버, 호박색

옐로, 노랑/황색

브라운, 갈색

그린, 초록/녹색

라임, 연두

민트, 파스텔 청록

틸, 짙은 청록

블루, 파랑/청색

시안, 밝은 청록

스카이, 하늘색

인디고, 남색

네이비, 곤색/감색

퍼플, 보라/자주 계열

SHADOW NONE

HOVER NONE

AFTER

버튼색 모두 적용 가능

BORDER COLOR · WIDTH

보더색 모두 적용 가능

BORDER STYLE

보더 스타일 모두 적용 가능

TEXT COLOR · FONT

텍스트 색 모두 적용 가능

Web Fonts

font shorthand 구성 font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

:root {
    --cose-NanumSquareAc: 400 16px 'NanumSquareAc';
}
.cose-NanumSquareAc {
    font: var(--cose-NanumSquareAc);
}

Warning: Undefined variable $HtmlFontClass in /var/www/html/claude_web/cms/module/core/EasyWebSuiteDocument/03.WebFonts.php on line 128

<div class="cose-NanumSquareAc">font font-family</div>

cose-D2Coding

--cose-D2Coding

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-D2Coding-700

--cose-D2Coding-700

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Gothic

--cose-DOS-Gothic

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Iyagi-700

--cose-DOS-Iyagi-700

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Miraero

--cose-DOS-Miraero

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Myungjo

--cose-DOS-Myungjo

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Pilgi

--cose-DOS-Pilgi

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Saemmul

--cose-DOS-Saemmul

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-DOS-Sam3KR

--cose-DOS-Sam3KR

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-NanumSquareAc

--cose-NanumSquareAc

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-NanumSquareAc-300

--cose-NanumSquareAc-300

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-NanumSquareAc-700

--cose-NanumSquareAc-700

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-NanumSquareAc-800

--cose-NanumSquareAc-800

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-UnifontEx

--cose-UnifontEx

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-neodgm

--cose-neodgm

가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123467890

cose-neodgmpro