{"id":12302,"date":"2025-06-30T10:58:59","date_gmt":"2025-06-30T10:58:59","guid":{"rendered":"https:\/\/www.cties.jp\/en\/color-palette\/"},"modified":"2026-04-08T09:45:55","modified_gmt":"2026-04-08T00:45:55","slug":"color-palette","status":"publish","type":"page","link":"https:\/\/www.cties.jp\/en\/more\/color-palette\/","title":{"rendered":"Color palette"},"content":{"rendered":"\n
\n
\n
\n
\n

Neutral 950<\/p>\n<\/div>\n\n\n\n

\n

Neutral 900<\/p>\n\n\n\n

Headings<\/p>\n<\/div>\n\n\n\n

\n

Neutral 800<\/p>\n<\/div>\n\n\n\n

\n

Neutral 700<\/p>\n\n\n\n

Text default<\/p>\n<\/div>\n\n\n\n

\n

Neutral 600<\/p>\n<\/div>\n\n\n\n

\n

Neutral 500<\/p>\n\n\n\n

Text medium<\/p>\n<\/div>\n\n\n\n

\n

Neutral 400<\/p>\n\n\n\n

Text light<\/p>\n<\/div>\n\n\n\n

\n

Neutral 300<\/p>\n\n\n\n

Contrast text<\/p>\n<\/div>\n\n\n\n

\n

Neutral 200<\/mark><\/p>\n\n\n\n

Dividers<\/p>\n<\/div>\n\n\n\n

\n

Neutral 100<\/p>\n<\/div>\n\n\n\n

\n
\n

Neutral 050<\/p>\n<\/div>\n\n\n\n

\n

Neutral 000<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Primary 950<\/p>\n<\/div>\n\n\n\n

\n

Primary 900<\/p>\n<\/div>\n\n\n\n

\n

Primary 800<\/p>\n<\/div>\n\n\n\n

\n

Primary<\/mark> 700<\/mark><\/p>\n<\/div>\n\n\n\n

\n

Primar 600<\/p>\n\n\n\n

Button hover, icon<\/p>\n<\/div>\n\n\n\n

\n

Primary<\/mark> 500<\/mark><\/p>\n\n\n\n

Button<\/p>\n<\/div>\n\n\n\n

\n

Primary<\/mark> 400<\/mark><\/p>\n<\/div>\n\n\n\n

\n

Primary<\/mark> 300<\/mark><\/p>\n<\/div>\n\n\n\n

\n

Primary<\/mark> 200<\/mark><\/p>\n<\/div>\n\n\n\n

\n

Primary<\/mark> 100<\/mark><\/p>\n<\/div>\n\n\n\n

\n

Primary 50<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Secondary 950<\/p>\n<\/div>\n\n\n\n

\n

Secondary 900<\/p>\n<\/div>\n\n\n\n

\n

Secondary 800<\/p>\n<\/div>\n\n\n\n

\n

Secondary 700<\/p>\n<\/div>\n\n\n\n

\n

Secondary 600<\/p>\n<\/div>\n\n\n\n

\n

Secondary 500<\/p>\n<\/div>\n\n\n\n

\n

Secondary 400<\/p>\n<\/div>\n\n\n\n

\n

Secondary 300<\/p>\n<\/div>\n\n\n\n

\n

Secondary 200<\/p>\n<\/div>\n\n\n\n

\n

Secondary 100<\/p>\n<\/div>\n\n\n\n

\n

Secondary 50<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Gradient 1<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>2<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Gradient 3<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>4<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Gradient 5<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>6<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Gradient 7<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>8<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Gradient 9<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>10<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Gradient 11<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>12<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Gradient 13<\/p>\n<\/div>\n\n\n\n

\n

Gradient <\/mark>14<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Natural shadow<\/p>\n<\/div>\n\n\n\n

\n

Deep shadow<\/p>\n<\/div>\n\n\n\n

\n

Sharp shadow<\/p>\n<\/div>\n\n\n\n

\n

Outlined shadow<\/p>\n<\/div>\n\n\n\n

\n

Crisp shadow<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

01<\/p>\n<\/div>\n<\/div>\n\n\n\n

Consectetur elit tellus<\/h3>\n\n\n\n

Amet consectetur adipiscing elit tellus ullamcorper glavrida luctus consectetur adipiscing elit tellus nec.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

02<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amet consectetur<\/h3>\n\n\n\n

Consectetur elit tellus, luctus consectetur adipiscing elit tellus metus dolor elit tellus amet adipiscing.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

03<\/p>\n<\/div>\n<\/div>\n\n\n\n

Donec adipiscing elit<\/h3>\n\n\n\n

Duis tristique id adipiscing lorem ipsum dolor nec nisl pellentesque libero elit tellus adipiscing lorem ipsum!<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

01<\/p>\n<\/div>\n<\/div>\n\n\n\n

Consectetur elit tellus<\/h3>\n\n\n\n

Amet consectetur adipiscing elit tellus ullamcorper glavrida luctus consectetur adipiscing elit tellus nec.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

02<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amet consectetur<\/h3>\n\n\n\n

Consectetur elit tellus, luctus consectetur adipiscing elit tellus metus dolor elit tellus amet adipiscing.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

03<\/p>\n<\/div>\n<\/div>\n\n\n\n

Donec adipiscing elit<\/h4>\n\n\n\n

Duis tristique id adipiscing lorem ipsum dolor nec nisl pellentesque libero elit tellus adipiscing lorem ipsum!<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

01<\/p>\n<\/div>\n<\/div>\n\n\n\n

Consectetur elit tellus<\/h3>\n\n\n\n

Amet consectetur adipiscing elit tellus ullamcorper glavrida luctus consectetur adipiscing elit tellus nec.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

02<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amet consectetur<\/h3>\n\n\n\n

Consectetur elit tellus, luctus consectetur adipiscing elit tellus metus dolor elit tellus amet adipiscing.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

03<\/p>\n<\/div>\n<\/div>\n\n\n\n

Donec adipiscing elit<\/h4>\n\n\n\n

Duis tristique id adipiscing lorem ipsum dolor nec nisl pellentesque libero elit tellus adipiscing lorem ipsum!<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

01<\/p>\n<\/div>\n<\/div>\n\n\n\n

Consectetur elit tellus<\/h3>\n\n\n\n

Amet consectetur adipiscing elit tellus ullamcorper glavrida luctus consectetur adipiscing elit tellus nec.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

02<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amet consectetur<\/h3>\n\n\n\n

Consectetur elit tellus, luctus consectetur adipiscing elit tellus metus dolor elit tellus amet adipiscing.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

03<\/p>\n<\/div>\n<\/div>\n\n\n\n

Donec adipiscing elit<\/h4>\n\n\n\n

Duis tristique id adipiscing lorem ipsum dolor nec nisl pellentesque libero elit tellus adipiscing lorem ipsum!<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

01<\/p>\n<\/div>\n<\/div>\n\n\n\n

Consectetur elit tellus<\/h3>\n\n\n\n

Amet consectetur adipiscing elit tellus ullamcorper glavrida luctus consectetur adipiscing elit tellus nec.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

02<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amet consectetur<\/h3>\n\n\n\n

Consectetur elit tellus, luctus consectetur adipiscing elit tellus metus dolor elit tellus amet adipiscing.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

03<\/p>\n<\/div>\n<\/div>\n\n\n\n

Donec adipiscing elit<\/h4>\n\n\n\n

Duis tristique id adipiscing lorem ipsum dolor nec nisl pellentesque libero elit tellus adipiscing lorem ipsum!<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

98.5%<\/p>\n\n\n\n

Lorem ipsum dolor<\/h3>\n<\/div>\n\n\n\n
\n
\n
\n

%<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Consectetur adipiscing convallis <\/h3>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

\u2014<\/p>\n\n\n\n

Lorem consectetur ipsum adipiscing<\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Consectetur adipiscing convallis <\/p>\n<\/div>\n\n\n\n

\n

\u2014<\/p>\n\n\n\n

Donec adipiscing elit tellus<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

01<\/p>\n<\/div>\n<\/div>\n\n\n\n

Consectetur elit tellus<\/h3>\n\n\n\n

Amet consectetur adipiscing elit tellus ullamcorper glavrida luctus consectetur adipiscing elit tellus nec.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

02<\/p>\n<\/div>\n<\/div>\n\n\n\n

Amet consectetur<\/h3>\n\n\n\n

Consectetur elit tellus, luctus consectetur adipiscing elit tellus metus dolor elit tellus amet adipiscing.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

03<\/p>\n<\/div>\n<\/div>\n\n\n\n

Donec adipiscing elit<\/h4>\n\n\n\n

Duis tristique id adipiscing lorem ipsum dolor nec nisl pellentesque libero elit tellus adipiscing lorem ipsum!<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Neutral 950 Neutral 900 Headings Neutral 800 Neutral 700 Text default Neutral 600 Neutral 500 Text medium Neut […]<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":14723,"menu_order":994,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-canvas-with-title","meta":{"footnotes":""},"class_list":["post-12302","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/pages\/12302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/comments?post=12302"}],"version-history":[{"count":0,"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/pages\/12302\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/pages\/14723"}],"wp:attachment":[{"href":"https:\/\/www.cties.jp\/en\/wp-json\/wp\/v2\/media?parent=12302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}