个人网站配色方案

本文配色方案采用16进制颜色值进行表示

配色方案

	主题色	辅助色	标题背景色	超链接悬浮色	按钮色	按钮悬浮色
首页	#777777	#C3C3C3	#77777725	#CA0C16	#95A5A6	#111111
博客页	#4EA1DB	#5B7E98	#00AFF210	#CA0C16	—	—
图片页	#6F978E	#8DACA6	#E4BC3610	#CA0C16	#E4BC36	#8DACA6
作品页	#6F978E	#8DACA6	#E4BC3610	#CA0C16	#E4BC36	#8DACA6
导航页	#B74D7E	#FFE5E550	#C8C8C820	#F95802	#A4A4A4	#DE9090

颜色展示

代码

CSS颜色变量相关代码

:root {
/* 首页 */
  --home-page-theme-color=#777777;
  --home-page-sub-color=#c3c3c3;
  --home-page-title-bg-color=#77777725;
  --home-page-hyperlink-floating-color=#ca0c16;
  --home-page-button-color=#95a5a6;
  --home-page-button-floating-color=#111111;
/* 博客页 */
  --blog-page-theme-color=#4ea1db;
  --blog-page-sub-color=#5b7e98;
  --blog-page-title-bg-color=#00aff210;
  --blog-page-hyperlink-floating-color=#ca0c16;
  
  
/* 图片页 */
  --image-page-theme-color=#6f978e;
  --image-page-sub-color=#8daca6;
  --image-page-title-bg-color=#e4bc3610;
  --image-page-hyperlink-floating-color=#ca0c16;
  --image-page-button-color=#e4bc36;
  --image-page-button-floating-color=#8daca6;
/* 作品页 */
  --works-page-theme-color=#6f978e;
  --works-page-sub-color=#8daca6;
  --works-page-title-bg-color=#e4bc3610;
  --works-page-hyperlink-floating-color=#ca0c16;
  --works-page-button-color=#e4bc36;
  --works-page-button-floating-color=#8daca6;
/* 导航页 */
  --navigator-page-theme-color=#b74d7e;
  --navigator-page-sub-color=#ffe5e550;
  --navigator-page-title-bg-color=#c8c8c820;
  --navigator-page-hyperlink-floating-color=#f95802;
  --navigator-page-button-color=#a4a4a4;
  --navigator-page-button-floating-color=#de9090;
  }

JavaScript颜色变量相关代码

// 首页
const HOME_PAGE_THEME_COLOR="#777777";
const HOME_PAGE_SUB_COLOR="#C3C3C3";
const HOME_PAGE_TITLE_BG_COLOR="#77777725";
const HOME_PAGE_HYPERLINK_FLOATING_COLOR="#CA0C16";
const HOME_PAGE_BUTTON_COLOR="#95A5A6";
const HOME_PAGE_BUTTON_FLOATING_COLOR="#111111";
// 博客页
const BLOG_PAGE_THEME_COLOR="#4EA1DB";
const BLOG_PAGE_SUB_COLOR="#5B7E98";
const BLOG_PAGE_TITLE_BG_COLOR="#00AFF210";
const BLOG_PAGE_HYPERLINK_FLOATING_COLOR="#CA0C16";
  
  
// 图片页
const IMAGE_PAGE_THEME_COLOR="#6F978E";
const IMAGE_PAGE_SUB_COLOR="#8DACA6";
const IMAGE_PAGE_TITLE_BG_COLOR="#E4BC3610";
const IMAGE_PAGE_HYPERLINK_FLOATING_COLOR="#CA0C16";
const IMAGE_PAGE_BUTTON_COLOR="#E4BC36";
const IMAGE_PAGE_BUTTON_FLOATING_COLOR="#8DACA6";
// 作品页
const WORKS_PAGE_THEME_COLOR="#6F978E";
const WORKS_PAGE_SUB_COLOR="#8DACA6";
const WORKS_PAGE_TITLE_BG_COLOR="#E4BC3610";
const WORKS_PAGE_HYPERLINK_FLOATING_COLOR="#CA0C16";
const WORKS_PAGE_BUTTON_COLOR="#E4BC36";
const WORKS_PAGE_BUTTON_FLOATING_COLOR="#8DACA6";
// 导航页
const NAVIGATOR_PAGE_THEME_COLOR="#B74D7E";
const NAVIGATOR_PAGE_SUB_COLOR="#FFE5E550";
const NAVIGATOR_PAGE_TITLE_BG_COLOR="#C8C8C820";
const NAVIGATOR_PAGE_HYPERLINK_FLOATING_COLOR="#F95802";
const NAVIGATOR_PAGE_BUTTON_COLOR="#A4A4A4";
const NAVIGATOR_PAGE_BUTTON_FLOATING_COLOR="#DE9090";