1<!DOCTYPE html><html lang="zh-CN"><head><link rel="icon" href="./logo1.png"/><link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Rubik"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="description" content="KaKa æä¾ä¸°å¯çé
è²æ¹æ¡ï¼è®©é
è²æ´å ç®å"/><meta property="og:description" content="KaKa æä¾ä¸°å¯çé
è²æ¹æ¡ï¼è®©é
è²æ´å ç®å"/><meta property="author" content="Tang Weijuan"/><meta property="keywords" content="é¢è²,é¢è²æ¨¡æ¿,è²å¡,æ¸åè²,é¶æ¢¯è²,é¢è²åè,color,color card,color picker,gradient,step color,color reference,design,develop"/><title>ç»å
¸ | KaKa è²æ¿</title><meta name="robots" content="index,follow"/><meta name="googlebot" content="index,follow"/><meta property="og:title" content="ç»å
¸ | KaKa è²æ¿"/><meta name="next-head-count" content="10"/><link rel="preload" href="/color-card/_next/static/css/5c209f02cb0d87aef903.css" as="style"/><link rel="stylesheet" href="/color-card/_next/static/css/5c209f02cb0d87aef903.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/color-card/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script>
1<script src="/color-card/_next/static/chunks/webpack-d4ab6f762a2bbb8503f3.js" defer=""></script>
1<script src="/color-card/_next/static/chunks/framework-2191d16384373197bc0a.js" defer=""></script>
1<script src="/color-card/_next/static/chunks/main-1f2c591c5d3bfcfc95e6.js" defer=""></script>
1<script src="/color-card/_next/static/chunks/pages/_app-57fe65f517efdd9c89d9.js" defer=""></script>
1<script src="/color-card/_next/static/chunks/706-101f1947b17bb1c31617.js" defer=""></script>
1<script src="/color-card/_next/static/chunks/pages/index-5aedd2f92aa867980c00.js" defer=""></script>
1<script src="/color-card/_next/static/r_iZ1bi91xmbnCYz85_nU/_buildManifest.js" defer=""></script>
1<script src="/color-card/_next/static/r_iZ1bi91xmbnCYz85_nU/_ssgManifest.js" defer=""></script>
1<style data-href="https://fonts.googleapis.com/css?family=Rubik">@font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0Uz.woff) format('woff')}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWkUzdYPFkZVOA6w.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0UzdYPFkZVOA6w.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFVUUzdYPFkZVOA6w.woff) format('woff');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFWUUzdYPFkZVOA6w.woff) format('woff');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0UzdYPFkZVO.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><style data-emotion="css-global 1eqawat">:host,:root{--chakra-ring-inset:var(--chakra-empty,/*!*/ /*!*/);--chakra-ring-offset-width:0px;--chakra-ring-offset-color:#fff;--chakra-ring-color:rgba(66, 153, 225, 0.6);--chakra-ring-offset-shadow:0 0 #0000;--chakra-ring-shadow:0 0 #0000;--chakra-space-x-reverse:0;--chakra-space-y-reverse:0;--chakra-colors-transparent:transparent;--chakra-colors-current:currentColor;--chakra-colors-black:#000000;--chakra-colors-white:#FFFFFF;--chakra-colors-whiteAlpha-50:rgba(255, 255, 255, 0.04);--chakra-colors-whiteAlpha-100:rgba(255, 255, 255, 0.06);--chakra-colors-whiteAlpha-200:rgba(255, 255, 255, 0.08);--chakra-colors-whiteAlpha-300:rgba(255, 255, 255, 0.16);--chakra-colors-whiteAlpha-400:rgba(255, 255, 255, 0.24);--chakra-colors-whiteAlpha-500:rgba(255, 255, 255, 0.36);--chakra-colors-whiteAlpha-600:rgba(255, 255, 255, 0.48);--chakra-colors-whiteAlpha-700:rgba(255, 255, 255, 0.64);--chakra-colors-whiteAlpha-800:rgba(255, 255, 255, 0.80);--chakra-colors-whiteAlpha-900:rgba(255, 255, 255, 0.92);--chakra-colors-blackAlpha-50:rgba(0, 0, 0, 0.04);--chakra-colors-blackAlpha-100:rgba(0, 0, 0, 0.06);--chakra-colors-blackAlpha-200:rgba(0, 0, 0, 0.08);--chakra-colors-blackAlpha-300:rgba(0, 0, 0, 0.16);--chakra-colors-blackAlpha-400:rgba(0, 0, 0, 0.24);--chakra-colors-blackAlpha-500:rgba(0, 0, 0, 0.36);--chakra-colors-blackAlpha-600:rgba(0, 0, 0, 0.48);--chakra-colors-blackAlpha-700:rgba(0, 0, 0, 0.64);--chakra-colors-blackAlpha-800:rgba(0, 0, 0, 0.80);--chakra-colors-blackAlpha-900:rgba(0, 0, 0, 0.92);--chakra-colors-gray-50:#F7FAFC;--chakra-colors-gray-100:#EDF2F7;--chakra-colors-gray-200:#E2E8F0;--chakra-colors-gray-300:#CBD5E0;--chakra-colors-gray-400:#A0AEC0;--chakra-colors-gray-500:#718096;--chakra-colors-gray-600:#4A5568;--chakra-colors-gray-700:#2D3748;--chakra-colors-gray-800:#1A202C;--chakra-colors-gray-900:#171923;--chakra-colors-red-50:#FFF5F5;--chakra-colors-red-100:#FED7D7;--chakra-colors-red-200:#FEB2B2;--chakra-colors-red-300:#FC8181;--chakra-colors-red-400:#F56565;--chakra-colors-red-500:#E53E3E;--chakra-colors-red-600:#C53030;--chakra-colors-red-700:#9B2C2C;--chakra-colors-red-800:#822727;--chakra-colors-red-900:#63171B;--chakra-colors-orange-50:#FFFAF0;--chakra-colors-orange-100:#FEEBC8;--chakra-colors-orange-200:#FBD38D;--chakra-colors-orange-300:#F6AD55;--chakra-colors-orange-400:#ED8936;--chakra-colors-orange-500:#DD6B20;--chakra-colors-orange-600:#C05621;--chakra-colors-orange-700:#9C4221;--chakra-colors-orange-800:#7B341E;--chakra-colors-orange-900:#652B19;--chakra-colors-yellow-50:#FFFFF0;--chakra-colors-yellow-100:#FEFCBF;--chakra-colors-yellow-200:#FAF089;--chakra-colors-yellow-300:#F6E05E;--chakra-colors-yellow-400:#ECC94B;--chakra-colors-yellow-500:#D69E2E;--chakra-colors-yellow-600:#B7791F;--chakra-colors-yellow-700:#975A16;--chakra-colors-yellow-800:#744210;--chakra-colors-yellow-900:#5F370E;--chakra-colors-green-50:#F0FFF4;--chakra-colors-green-100:#C6F6D5;--chakra-colors-green-200:#9AE6B4;--chakra-colors-green-300:#68D391;
1--chakra-colors-green-400:#48BB78;--chakra-colors-green-500:#38A169;--chakra-colors-green-600:#2F855A;--chakra-colors-green-700:#276749;--chakra-colors-green-800:#22543D;--chakra-colors-green-900:#1C4532;--chakra-colors-teal-50:#E6FFFA;--chakra-colors-teal-100:#B2F5EA;--chakra-colors-teal-200:#81E6D9;--chakra-colors-teal-300:#4FD1C5;--chakra-colors-teal-400:#38B2AC;--chakra-colors-teal-500:#319795;--chakra-colors-teal-600:#2C7A7B;--chakra-colors-teal-700:#285E61;--chakra-colors-teal-800:#234E52;--chakra-colors-teal-900:#1D4044;--chakra-colors-blue-50:#ebf8ff;--chakra-colors-blue-100:#bee3f8;--chakra-colors-blue-200:#90cdf4;--chakra-colors-blue-300:#63b3ed;--chakra-colors-blue-400:#4299e1;--chakra-colors-blue-500:#3182ce;--chakra-colors-blue-600:#2b6cb0;--chakra-colors-blue-700:#2c5282;--chakra-colors-blue-800:#2a4365;--chakra-colors-blue-900:#1A365D;--chakra-colors-cyan-50:#EDFDFD;--chakra-colors-cyan-100:#C4F1F9;--chakra-colors-cyan-200:#9DECF9;--chakra-colors-cyan-300:#76E4F7;--chakra-colors-cyan-400:#0BC5EA;--chakra-colors-cyan-500:#00B5D8;--chakra-colors-cyan-600:#00A3C4;--chakra-colors-cyan-700:#0987A0;--chakra-colors-cyan-800:#086F83;--chakra-colors-cyan-900:#065666;--chakra-colors-purple-50:#FAF5FF;--chakra-colors-purple-100:#E9D8FD;--chakra-colors-purple-200:#D6BCFA;--chakra-colors-purple-300:#B794F4;--chakra-colors-purple-400:#9F7AEA;--chakra-colors-purple-500:#805AD5;--chakra-colors-purple-600:#6B46C1;--chakra-colors-purple-700:#553C9A;--chakra-colors-purple-800:#44337A;--chakra-colors-purple-900:#322659;--chakra-colors-pink-50:#FFF5F7;--chakra-colors-pink-100:#FED7E2;--chakra-colors-pink-200:#FBB6CE;--chakra-colors-pink-300:#F687B3;--chakra-colors-pink-400:#ED64A6;--chakra-colors-pink-500:#D53F8C;--chakra-colors-pink-600:#B83280;--chakra-colors-pink-700:#97266D;--chakra-colors-pink-800:#702459;--chakra-colors-pink-900:#521B41;--chakra-colors-linkedin-50:#E8F4F9;--chakra-colors-linkedin-100:#CFEDFB;--chakra-colors-linkedin-200:#9BDAF3;--chakra-colors-linkedin-300:#68C7EC;--chakra-colors-linkedin-400:#34B3E4;--chakra-colors-linkedin-500:#00A0DC;--chakra-colors-linkedin-600:#008CC9;--chakra-colors-linkedin-700:#0077B5;--chakra-colors-linkedin-800:#005E93;--chakra-colors-linkedin-900:#004471;--chakra-colors-facebook-50:#E8F4F9;--chakra-colors-facebook-100:#D9DEE9;--chakra-colors-facebook-200:#B7C2DA;--chakra-colors-facebook-300:#6482C0;--chakra-colors-facebook-400:#4267B2;--chakra-colors-facebook-500:#385898;--chakra-colors-facebook-600:#314E89;--chakra-colors-facebook-700:#29487D;--chakra-colors-facebook-800:#223B67;--chakra-colors-facebook-900:#1E355B;--chakra-colors-messenger-50:#D0E6FF;--chakra-colors-messenger-100:#B9DAFF;--chakra-colors-messenger-200:#A2CDFF;--chakra-colors-messenger-300:#7AB8FF;--chakra-colors-messenger-400:#2E90FF;--chakra-colors-messenger-500:#0078FF;--chakra-colors-messenger-600:#0063D1;--chakra-colors-messenger-700:#0052AC;--chakra-colors-messenger-800:#003C7E;--chakra-colors-messenger-900:#002C5C;--chakra-colors-whatsapp-50:#dffeec;--chakra-colors-whatsapp-100:#b9f5d0;--chakra-colors-whatsapp-200:#90edb3;--chakra-colors-whatsapp-300:#65e495;--chakra-colors-whatsapp-400:#3cdd78;--chakra-colors-whatsapp-500:#22c35e;--chakra-colors-whatsapp-600:#179848;--chakra-colors-whatsapp-700:#0c6c33;--chakra-colors-whatsapp-800:#01421c;--chakra-colors-whatsapp-900:#001803;--chakra-colors-twitter-50:#E5F4FD;--chakra-colors-twitter-100:#C8E9FB;--chakra-colors-twitter-200:#A8DCFA;--chakra-colors-twitter-300:#83CDF7;--chakra-colors-twitter-400:#57BBF5;--chakra-colors-twitter-500:#1DA1F2;--chakra-colors-twitter-600:#1A94DA;--chakra-colors-twitter-700:#1681BF;--chakra-colors-twitter-800:#136B9E;--chakra-colors-twitter-900:#0D4D71;--chakra-colors-telegram-50:#E3F2F9;--chakra-colors-telegram-100:#C5E4F3;--chakra-colors-telegram-200:#A2D4EC;--chakra-colors-telegram-300:#7AC1E4;--chakra-colors-telegram-400:#47A9DA;--chakra-colors-telegram-500:#0088CC;--chakra-colors-telegram-600:#007AB8;--chakra-colors-telegram-700:#006BA1;--chakra-colors-telegram-800:#005885;--chakra-colors-telegram-900:#003F5E;--chakra-borders-none:0;--chakra-borders-1px:1px solid;--chakra-borders-2px:2px solid;--chakra-borders-4px:4px solid;--chakra-borders-8px:8px solid;--chakra-fonts-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--chakra-fontSizes-xs:0.75rem;--chakra-fontSizes-sm:0.875rem;--chakra-fontSizes-md:1rem;--chakra-fontSizes-lg:1.125rem;--chakra-fontSizes-xl:1.25rem;--chakra-fontSizes-2xl:1.5rem;--chakra-fontSizes-3xl:1.875rem;--chakra-fontSizes-4xl:2.25rem;--chakra-fontSizes-5xl:3rem;--chakra-fontSizes-6xl:3.75rem;--chakra-fontSizes-7xl:4.5rem;--chakra-fontSizes-8xl:6rem;--chakra-fontSizes-9xl:8rem;--chakra-fontWeights-hairline:100;--chakra-fontWeights-thin:200;--chakra-fontWeights-light:300;--chakra-fontWeights-normal:400;--chakra-fontWeights-medium:500;--chakra-fontWeights-semibold:600;--chakra-fontWeights-bold:700;--chakra-fontWeights-extrabold:800;--chakra-fontWeights-black:900;--chakra-letterSpacings-tighter:-0.05em;
1--chakra-letterSpacings-tight:-0.025em;--chakra-letterSpacings-normal:0;--chakra-letterSpacings-wide:0.025em;--chakra-letterSpacings-wider:0.05em;--chakra-letterSpacings-widest:0.1em;--chakra-lineHeights-3:.75rem;--chakra-lineHeights-4:1rem;--chakra-lineHeights-5:1.25rem;--chakra-lineHeights-6:1.5rem;--chakra-lineHeights-7:1.75rem;--chakra-lineHeights-8:2rem;--chakra-lineHeights-9:2.25rem;--chakra-lineHeights-10:2.5rem;--chakra-lineHeights-normal:normal;--chakra-lineHeights-none:1;--chakra-lineHeights-shorter:1.25;--chakra-lineHeights-short:1.375;--chakra-lineHeights-base:1.5;--chakra-lineHeights-tall:1.625;--chakra-lineHeights-taller:2;--chakra-radii-none:0;--chakra-radii-sm:0.125rem;--chakra-radii-base:0.25rem;--chakra-radii-md:0.375rem;--chakra-radii-lg:0.5rem;--chakra-radii-xl:0.75rem;--chakra-radii-2xl:1rem;--chakra-radii-3xl:1.5rem;--chakra-radii-full:9999px;--chakra-space-1:0.25rem;--chakra-space-2:0.5rem;--chakra-space-3:0.75rem;--chakra-space-4:1rem;--chakra-space-5:1.25rem;--chakra-space-6:1.5rem;--chakra-space-7:1.75rem;--chakra-space-8:2rem;--chakra-space-9:2.25rem;--chakra-space-10:2.5rem;--chakra-space-12:3rem;--chakra-space-14:3.5rem;--chakra-space-16:4rem;--chakra-space-20:5rem;--chakra-space-24:6rem;--chakra-space-28:7rem;--chakra-space-32:8rem;--chakra-space-36:9rem;--chakra-space-40:10rem;--chakra-space-44:11rem;--chakra-space-48:12rem;--chakra-space-52:13rem;--chakra-space-56:14rem;--chakra-space-60:15rem;--chakra-space-64:16rem;--chakra-space-72:18rem;--chakra-space-80:20rem;--chakra-space-96:24rem;--chakra-space-px:1px;--chakra-space-0-5:0.125rem;--chakra-space-1-5:0.375rem;--chakra-space-2-5:0.625rem;--chakra-space-3-5:0.875rem;--chakra-shadows-xs:0 0 0 1px rgba(0, 0, 0, 0.05);--chakra-shadows-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--chakra-shadows-base:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);--chakra-shadows-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--chakra-shadows-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--chakra-shadows-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);--chakra-shadows-2xl:0 25px 50px -12px rgba(0, 0, 0, 0.25);--chakra-shadows-outline:0 0 0 3px rgba(66, 153, 225, 0.6);--chakra-shadows-inner:inset 0 2px 4px 0 rgba(0,0,0,0.06);--chakra-shadows-none:none;--chakra-shadows-dark-lg:rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,rgba(0, 0, 0, 0.2) 0px 5px 10px,rgba(0, 0, 0, 0.4) 0px 15px 40px;--chakra-sizes-1:0.25rem;--chakra-sizes-2:0.5rem;--chakra-sizes-3:0.75rem;--chakra-sizes-4:1rem;--chakra-sizes-5:1.25rem;--chakra-sizes-6:1.5rem;--chakra-sizes-7:1.75rem;--chakra-sizes-8:2rem;--chakra-sizes-9:2.25rem;--chakra-sizes-10:2.5rem;--chakra-sizes-12:3rem;--chakra-sizes-14:3.5rem;--chakra-sizes-16:4rem;--chakra-sizes-20:5rem;--chakra-sizes-24:6rem;--chakra-sizes-28:7rem;--chakra-sizes-32:8rem;--chakra-sizes-36:9rem;--chakra-sizes-40:10rem;--chakra-sizes-44:11rem;--chakra-sizes-48:12rem;--chakra-sizes-52:13rem;--chakra-sizes-56:14rem;--chakra-sizes-60:15rem;--chakra-sizes-64:16rem;--chakra-sizes-72:18rem;--chakra-sizes-80:20rem;--chakra-sizes-96:24rem;--chakra-sizes-px:1px;--chakra-sizes-0-5:0.125rem;--chakra-sizes-1-5:0.375rem;--chakra-sizes-2-5:0.625rem;--chakra-sizes-3-5:0.875rem;--chakra-sizes-max:max-content;--chakra-sizes-min:min-content;--chakra-sizes-full:100%;--chakra-sizes-3xs:14rem;--chakra-sizes-2xs:16rem;--chakra-sizes-xs:20rem;--chakra-sizes-sm:24rem;--chakra-sizes-md:28rem;--chakra-sizes-lg:32rem;--chakra-sizes-xl:36rem;--chakra-sizes-2xl:42rem;--chakra-sizes-3xl:48rem;--chakra-sizes-4xl:56rem;--chakra-sizes-5xl:64rem;--chakra-sizes-6xl:72rem;--chakra-sizes-7xl:80rem;--chakra-sizes-8xl:90rem;--chakra-sizes-container-sm:640px;--chakra-sizes-container-md:768px;--chakra-sizes-container-lg:1024px;--chakra-sizes-container-xl:1280px;--chakra-zIndices-hide:-1;--chakra-zIndices-auto:auto;--chakra-zIndices-base:0;--chakra-zIndices-docked:10;--chakra-zIndices-dropdown:1000;--chakra-zIndices-sticky:1100;--chakra-zIndices-banner:1200;--chakra-zIndices-overlay:1300;--chakra-zIndices-modal:1400;--chakra-zIndices-popover:1500;--chakra-zIndices-skipLink:1600;--chakra-zIndices-toast:1700;--chakra-zIndices-tooltip:1800;--chakra-transition-property-common:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;--chakra-transition-property-colors:background-color,border-color,color,fill,stroke;--chakra-transition-property-dimensions:width,height;--chakra-transition-property-position:left,right,top,bottom;--chakra-transition-property-background:background-color,background-image,background-position;--chakra-transition-easing-ease-in:cubic-bezier(0.4, 0, 1, 1);--chakra-transition-easing-ease-out:cubic-bezier(0, 0, 0.2, 1);--chakra-transition-easing-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--chakra-transition-duration-ultra-fast:50ms;--chakra-transition-duration-faster:100ms;--chakra-transition-duration-fast:150ms;--chakra-transition-duration-normal:200ms;--chakra-transition-duration-slow:300ms;--chakra-transition-duration-slower:400ms;--chakra-transition-duration-ultra-slow:500ms;--chakra-blur-none:0;--chakra-blur-sm:4px;--chakra-blur-base:8px;--chakra-blur-md:12px;--chakra-blur-lg:16px;
1--chakra-blur-xl:24px;--chakra-blur-2xl:40px;--chakra-blur-3xl:64px;}</style><style data-emotion="css-global 1jqlf9g">html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;}body{position:relative;min-height:100%;font-feature-settings:'kern';}*,*::before,*::after{border-width:0;border-style:solid;box-sizing:border-box;}main{display:block;}hr{border-top-width:1px;box-sizing:content-box;height:0;overflow:visible;}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em;}a{background-color:transparent;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bold;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none!important;}input[type="number"]{-moz-appearance:textfield;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none!important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}template{display:none;}[hidden]{display:none!important;}body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}textarea{resize:vertical;}button,[role="button"]{cursor:pointer;}button::-moz-focus-inner{border:0!important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}img,svg,video,canvas,audio,iframe,embed,object{display:block;}img,video{max-width:100%;height:auto;}[data-js-focus-visible] :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}select::-ms-expand{display:none;}</style><style data-emotion="css-global 1baqkrf">body{font-family:var(--chakra-fonts-body);color:var(--chakra-colors-gray-800);background:var(--chakra-colors-white);transition-property:background-color;transition-duration:var(--chakra-transition-duration-normal);line-height:var(--chakra-lineHeights-base);}*::-webkit-input-placeholder{color:var(--chakra-colors-gray-400);}*::-moz-placeholder{color:var(--chakra-colors-gray-400);}*:-ms-input-placeholder{color:var(--chakra-colors-gray-400);}*::placeholder{color:var(--chakra-colors-gray-400);}*,*::before,::after{border-color:var(--chakra-colors-gray-200);word-wrap:break-word;}</style><div class="css-0"><style data-emotion="css 129wfi">.css-129wfi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:80px;padding:0px 20px;background-color:var(--chakra-colors-white);position:fixed;top:0px;left:0px;right:0px;box-shadow:0px 5px 20px rgba(36, 37, 38, 0.25);z-index:1;}.css-129wfi>
1*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;}</style><div class="chakra-stack css-129wfi"><style data-emotion="css 84zodg">.css-84zodg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-84zodg>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;}</style><div class="chakra-stack css-84zodg"><img alt="kaka color card" src="./logo1.png" class="chakra-image css-0"/><style data-emotion="css 146yyx2">.css-146yyx2{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:var(--chakra-fontSizes-3xl);line-height:1.33;margin-top:0px;}@media screen and (min-width: 48em){.css-146yyx2{font-size:var(--chakra-fontSizes-4xl);line-height:1.2;}}</style><h1 class="chakra-heading css-146yyx2"><img alt="kaka" src="./logo2.png" class="chakra-image css-0"/></h1></div><style data-emotion="css 4egel4">.css-4egel4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-column-gap:10px;column-gap:10px;}.css-4egel4>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;}</style><div class="chakra-stack css-4egel4"><style data-emotion="css 3vaxfb">.css-3vaxfb{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;border:2px solid transparent;padding:10px 2px;border-bottom-color:#ff8d1a;}.css-3vaxfb:hover,.css-3vaxfb[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-3vaxfb:focus,.css-3vaxfb[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-3vaxfb" href="https://afterwork-design.github.io/color-card"><style data-emotion="css 5r1j2l">.css-5r1j2l{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:16px;line-height:1.33;}@media screen and (min-width: 48em){.css-5r1j2l{line-height:1.2;}}</style><h2 class="chakra-heading css-5r1j2l">Palette</h2></a><style data-emotion="css 136dk94">.css-136dk94{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;border:2px solid transparent;padding:10px 2px;}.css-136dk94:hover,.css-136dk94[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-136dk94:focus,.css-136dk94[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-136dk94" href="https://afterwork-design.github.io/color-card/gradient"><h2 class="chakra-heading css-5r1j2l">Gradient</h2></a><a class="chakra-link css-136dk94" href="https://afterwork-design.github.io/color-card/step"><h2 class="chakra-heading css-5r1j2l">Step</h2></a><style data-emotion="css 43m6lp">.css-43m6lp{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;padding-left:20px;}.css-43m6lp:hover,.css-43m6lp[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-43m6lp:focus,.css-43m6lp[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a target="_blank" class="chakra-link css-43m6lp" href="https://github.com/afterwork-design/color-card"><style data-emotion="css 11elljy">.css-11elljy{width:25px;height:25px;}</style><img src="./github.png" class="chakra-image css-11elljy"/></a></div></div><div class="css-0"><style data-emotion="css jwgdiu">.css-jwgdiu{display:grid;grid-row-gap:40px;grid-column-gap:40px;grid-template-columns:repeat(1, 1fr);margin-top:80px;margin-right:240px;padding:5px;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}@media screen and (min-width: 30em){.css-jwgdiu{grid-template-columns:repeat(2, 1fr);padding:20px;}}@media screen and (min-width: 48em){.css-jwgdiu{grid-template-columns:repeat(2, 1fr);padding:40px;}}@media screen and (min-width: 62em){.css-jwgdiu{grid-template-columns:repeat(3, 1fr);padding:80px;}}@media screen and (min-width: 80em){.css-jwgdiu{grid-template-columns:repeat(5, 1fr);}}@media screen and (min-width: 96em){.css-jwgdiu{grid-template-columns:repeat(6, 1fr);}}</style><div class="css-jwgdiu"><style data-emotion="css 1pvnel6">.css-1pvnel6{position:relative;height:0px;padding-bottom:100%;cursor:pointer;-webkit-transition:1s;transition:1s;}.css-1pvnel6:hover,.css-1pvnel6[data-hover]{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}</style><div class="css-1pvnel6"><style data-emotion="css 1w5j5vy">
1.css-1w5j5vy{display:grid;grid-template-rows:repeat(2, 50%);grid-template-columns:repeat(2, 50%);position:absolute;top:0px;left:0px;bottom:0px;right:0px;padding:20px;background-color:var(--chakra-colors-white);border-radius:8px;box-shadow:5px 12px 20px rgba(36, 37, 38, 0.13);}</style><div class="css-1w5j5vy"><style data-emotion="css ecbl4x">.css-ecbl4x{background-color:#d5a09a;}</style><div class="css-ecbl4x"></div><style data-emotion="css rdrnso">.css-rdrnso{background-color:#f2dbd5;}</style><div class="css-rdrnso"></div><style data-emotion="css 1htr2n3">.css-1htr2n3{background-color:#eae3dd;}</style><div class="css-1htr2n3"></div><style data-emotion="css 1th9adp">.css-1th9adp{background-color:#d8c1bb;}</style><div class="css-1th9adp"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><div class="css-1th9adp"></div><style data-emotion="css 1qk1zuk">.css-1qk1zuk{background-color:#f0e2e0;}</style><div class="css-1qk1zuk"></div><style data-emotion="css 11zajq8">.css-11zajq8{background-color:#ebeee7;}</style><div class="css-11zajq8"></div><style data-emotion="css yjnj9p">.css-yjnj9p{background-color:#e0c3a8;}</style><div class="css-yjnj9p"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css it7yso">.css-it7yso{background-color:#e7669e;}</style><div class="css-it7yso"></div><style data-emotion="css 10r0exu">.css-10r0exu{background-color:#e7afcc;}</style><div class="css-10r0exu"></div><style data-emotion="css 1eru91c">.css-1eru91c{background-color:#e6d9e3;}</style><div class="css-1eru91c"></div><style data-emotion="css kvlyzl">.css-kvlyzl{background-color:#5fa0d9;}</style><div class="css-kvlyzl"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css h38r89">.css-h38r89{background-color:#f29ab2;}</style><div class="css-h38r89"></div><style data-emotion="css b8phio">.css-b8phio{background-color:#f6d2e0;}</style><div class="css-b8phio"></div><style data-emotion="css dkqh4n">.css-dkqh4n{background-color:#d6dbee;}</style><div class="css-dkqh4n"></div><style data-emotion="css wcjoql">.css-wcjoql{background-color:#ccc9de;}</style><div class="css-wcjoql"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 13n18uq">.css-13n18uq{background-color:#eec9be;}</style><div class="css-13n18uq"></div><style data-emotion="css p3tfbj">.css-p3tfbj{background-color:#f3dbdb;}</style><div class="css-p3tfbj"></div><style data-emotion="css c12d85">.css-c12d85{background-color:#d2e8da;}</style><div class="css-c12d85"></div><style data-emotion="css 1xpqxlo">.css-1xpqxlo{background-color:#9acddc;}</style><div class="css-1xpqxlo"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 17rfkth">.css-17rfkth{background-color:#a1a5cb;}</style><div class="css-17rfkth"></div><style data-emotion="css ljjfe5">.css-ljjfe5{background-color:#cbc7d9;}</style><div class="css-ljjfe5"></div><style data-emotion="css y2udlr">.css-y2udlr{background-color:#d9ccd0;}</style><div class="css-y2udlr"></div><style data-emotion="css 86eqa5">.css-86eqa5{background-color:#bfb6c7;}</style><div class="css-86eqa5"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1558dv8">.css-1558dv8{background-color:#e7ab89;}</style><div class="css-1558dv8"></div><style data-emotion="css hsn1m9">.css-hsn1m9{background-color:#e0cfbb;}</style><div class="css-hsn1m9"></div><style data-emotion="css 86losy">.css-86losy{background-color:#e9dbd0;}</style><div class="css-86losy"></div><style data-emotion="css 19f2i0s">.css-19f2i0s{background-color:#a59179;}</style><div class="css-19f2i0s"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 8plj65">.css-8plj65{background-color:#a17364;}</style><div class="css-8plj65"></div><style data-emotion="css cpjqdc">.css-cpjqdc{background-color:#d7dac5;}</style><div class="css-cpjqdc"></div><style data-emotion="css 1a5f618">.css-1a5f618{background-color:#dbcdb2;}</style><div class="css-1a5f618"></div><style data-emotion="css 1tn6r0z">.css-1tn6r0z{background-color:#dac488;}</style><div class="css-1tn6r0z"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1ajwj8o">.css-1ajwj8o{background-color:#9c9672;}</style><div class="css-1ajwj8o"></div><style data-emotion="css bukdjj">.css-bukdjj{background-color:#c6b597;}</style><div class="css-bukdjj"></div><style data-emotion="css 1k326lj">.css-1k326lj{background-color:#b9c4b3;}</style><div class="css-1k326lj"></div><style data-emotion="css 2a69uy">.css-2a69uy{background-color:#a1b3a7;}</style><div class="css-2a69uy"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><div class="css-2a69uy"></div><style data-emotion="css bladp0">.css-bladp0{background-color:#bfafa2;}</style><div class="css-bladp0"></div><style data-emotion="css 1i34dcy">.css-1i34dcy{background-color:#b3a799;}</style><div class="css-1i34dcy"></div><style data-emotion="css 1kynel6">.css-1kynel6{background-color:#7e988d;}</style><div class="css-1kynel6"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 13w00ty">.css-13w00ty{background-color:#c4987d;}</style><div class="css-13w00ty"></div><style data-emotion="css 1d0heyy">.css-1d0heyy{background-color:#cebf9e;}</style><div class="css-1d0heyy"></div><style data-emotion="css ufhbfs">.css-ufhbfs{background-color:#dacdbd;}</style><div class="css-ufhbfs"></div><style data-emotion="css foffr0">.css-foffr0{background-color:#b0a498;}</style><div class="css-foffr0"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css a4pbc5">.css-a4pbc5{background-color:#c2a279;}</style><div class="css-a4pbc5"></div><style data-emotion="css 1qjtkd6">.css-1qjtkd6{background-color:#e5cbb2;}</style><div class="css-1qjtkd6"></div><style data-emotion="css 17vz8ym">.css-17vz8ym{background-color:#d1c088;}</style><div class="css-17vz8ym"></div><style data-emotion="css 5s65ez">.css-5s65ez{background-color:#d49d7e;}</style><div class="css-5s65ez"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 173dvrk">.css-173dvrk{background-color:#fbaf74;}</style><div class="css-173dvrk"></div><style data-emotion="css 1oubtn0">.css-1oubtn0{background-color:#f8f18e;}</style><div class="css-1oubtn0"></div><style data-emotion="css 1fav8sg">.css-1fav8sg{background-color:#6dbb68;}</style><div class="css-1fav8sg"></div><style data-emotion="css ldg4jg">.css-ldg4jg{background-color:#fda295;}</style><div class="css-ldg4jg"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css ieqd56">.css-ieqd56{background-color:#e9d1af;}</style><div class="css-ieqd56"></div><style data-emotion="css namphv">.css-namphv{background-color:#4b9faa;}</style><div class="css-namphv"></div><style data-emotion="css 1pqcv82">.css-1pqcv82{background-color:#b98377;}</style><div class="css-1pqcv82"></div><style data-emotion="css 6vr7ts">.css-6vr7ts{background-color:#ed8381;}</style><div class="css-6vr7ts"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css dl9jj5">.css-dl9jj5{background-color:#fcf8e0;}</style><div class="css-dl9jj5"></div><style data-emotion="css dvgpd4">.css-dvgpd4{background-color:#f1decf;}</style><div class="css-dvgpd4"></div><style data-emotion="css 7ocin2">.css-7ocin2{background-color:#ffe3d6;}</style><div class="css-7ocin2"></div><style data-emotion="css et5fop">.css-et5fop{background-color:#ffaf8a;}</style><div class="css-et5fop"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 7gmjac">.css-7gmjac{background-color:#f3c5c7;}</style><div class="css-7gmjac"></div><div class="css-et5fop"></div><style data-emotion="css 566q86">.css-566q86{background-color:#cec7f3;}</style><div class="css-566q86"></div><style data-emotion="css 1a7glab">.css-1a7glab{background-color:#d6e4a6;}</style><div class="css-1a7glab"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 41qvvw">.css-41qvvw{background-color:#db705e;}</style><div class="css-41qvvw"></div><style data-emotion="css 1hl742h">.css-1hl742h{background-color:#fee1d9;}</style><div class="css-1hl742h"></div><style data-emotion="css vgfxls">.css-vgfxls{background-color:#d9ebf5;}</style><div class="css-vgfxls"></div><style data-emotion="css 2vojxz">.css-2vojxz{background-color:#a8c8d7;}</style><div class="css-2vojxz"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 195ytxk">.css-195ytxk{background-color:#9cdee5;}</style><div class="css-195ytxk"></div><style data-emotion="css 1xsgqax">.css-1xsgqax{background-color:#a4e69c;}</style><div class="css-1xsgqax"></div><style data-emotion="css 7n3pnw">.css-7n3pnw{background-color:#e6d29c;}</style><div class="css-7n3pnw"></div><style data-emotion="css 1vv9ud9">.css-1vv9ud9{background-color:#e6e59c;}</style><div class="css-1vv9ud9"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css v0gh5d">
1.css-v0gh5d{background-color:#d6694c;}</style><div class="css-v0gh5d"></div><style data-emotion="css 1wc8mh9">.css-1wc8mh9{background-color:#f5c0a1;}</style><div class="css-1wc8mh9"></div><style data-emotion="css cr45jv">.css-cr45jv{background-color:#d8ddc0;}</style><div class="css-cr45jv"></div><style data-emotion="css 1xqxl2x">.css-1xqxl2x{background-color:#9bc2b0;}</style><div class="css-1xqxl2x"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 12orrbk">.css-12orrbk{background-color:#e19536;}</style><div class="css-12orrbk"></div><style data-emotion="css 1qdh3i5">.css-1qdh3i5{background-color:#f7c7b0;}</style><div class="css-1qdh3i5"></div><style data-emotion="css nbu7ej">.css-nbu7ej{background-color:#cba47b;}</style><div class="css-nbu7ej"></div><style data-emotion="css 1kwo9ks">.css-1kwo9ks{background-color:#3b5f2b;}</style><div class="css-1kwo9ks"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1o744i2">.css-1o744i2{background-color:#eed05b;}</style><div class="css-1o744i2"></div><style data-emotion="css zq7587">.css-zq7587{background-color:#e68764;}</style><div class="css-zq7587"></div><style data-emotion="css 19otn7n">.css-19otn7n{background-color:#907b57;}</style><div class="css-19otn7n"></div><style data-emotion="css 16e2kfu">.css-16e2kfu{background-color:#f0d8ad;}</style><div class="css-16e2kfu"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1sgm6bb">.css-1sgm6bb{background-color:#2a5097;}</style><div class="css-1sgm6bb"></div><style data-emotion="css 1wuis26">.css-1wuis26{background-color:#cf6938;}</style><div class="css-1wuis26"></div><style data-emotion="css l38i6z">.css-l38i6z{background-color:#ffc8a9;}</style><div class="css-l38i6z"></div><style data-emotion="css 1xpt36f">.css-1xpt36f{background-color:#1e73c4;}</style><div class="css-1xpt36f"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 89d9uy">.css-89d9uy{background-color:#db5087;}</style><div class="css-89d9uy"></div><style data-emotion="css 2um675">.css-2um675{background-color:#f8edfd;}</style><div class="css-2um675"></div><style data-emotion="css 12bc8vl">.css-12bc8vl{background-color:#ecbdcf;}</style><div class="css-12bc8vl"></div><style data-emotion="css l80tbl">.css-l80tbl{background-color:#8bb3c0;}</style><div class="css-l80tbl"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 729an3">.css-729an3{background-color:#de9e20;}</style><div class="css-729an3"></div><style data-emotion="css w6vqny">.css-w6vqny{background-color:#0758a6;}</style><div class="css-w6vqny"></div><style data-emotion="css 1u2pep9">.css-1u2pep9{background-color:#d47222;}</style><div class="css-1u2pep9"></div><style data-emotion="css nyllqm">.css-nyllqm{background-color:#d3b28f;}</style><div class="css-nyllqm"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css inzusc">.css-inzusc{background-color:#67b176;}</style><div class="css-inzusc"></div><style data-emotion="css 1dxfkq8">.css-1dxfkq8{background-color:#0f7953;}</style><div class="css-1dxfkq8"></div><style data-emotion="css x8tx4u">.css-x8tx4u{background-color:#b3cf9f;}</style><div class="css-x8tx4u"></div><style data-emotion="css bwfolb">.css-bwfolb{background-color:#80a949;}</style><div class="css-bwfolb"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css cksww6">.css-cksww6{background-color:#0f67fc;}</style><div class="css-cksww6"></div><style data-emotion="css qcwims">.css-qcwims{background-color:#b3cffe;}</style><div class="css-qcwims"></div><style data-emotion="css 17d1ius">.css-17d1ius{background-color:#f8cfb1;}</style><div class="css-17d1ius"></div><style data-emotion="css 10v6e5q">.css-10v6e5q{background-color:#ab4215;}</style><div class="css-10v6e5q"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css ad8rtu">.css-ad8rtu{background-color:#0f3391;}</style><div class="css-ad8rtu"></div><style data-emotion="css 1rgltpu">.css-1rgltpu{background-color:#d68d28;}</style><div class="css-1rgltpu"></div><style data-emotion="css tyzac8">.css-tyzac8{background-color:#ddb419;}</style><div class="css-tyzac8"></div><style data-emotion="css 1t7vy51">.css-1t7vy51{background-color:#a11109;}</style><div class="css-1t7vy51"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 17oa8gw">.css-17oa8gw{background-color:#a32317;}</style><div class="css-17oa8gw"></div><style data-emotion="css 1t0p1zx">.css-1t0p1zx{background-color:#d9d8c9;}</style><div class="css-1t0p1zx"></div><style data-emotion="css 7msi83">.css-7msi83{background-color:#e9c318;}</style><div class="css-7msi83"></div><style data-emotion="css h8b23k">.css-h8b23k{background-color:#496d5c;}</style><div class="css-h8b23k"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1r8n3ke">.css-1r8n3ke{background-color:#d25536;}</style><div class="css-1r8n3ke"></div><style data-emotion="css sxga1l">.css-sxga1l{background-color:#f5ead9;}</style><div class="css-sxga1l"></div><style data-emotion="css 75730s">.css-75730s{background-color:#f9c7b0;}</style><div class="css-75730s"></div><style data-emotion="css t5lnpm">.css-t5lnpm{background-color:#f6c72a;}</style><div class="css-t5lnpm"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1unzkv5">.css-1unzkv5{background-color:#7774e5;}</style><div class="css-1unzkv5"></div><style data-emotion="css 161zeld">.css-161zeld{background-color:#abd70e;}</style><div class="css-161zeld"></div><style data-emotion="css 1rij8l7">.css-1rij8l7{background-color:#e5e315;}</style><div class="css-1rij8l7"></div><style data-emotion="css 5cinzb">.css-5cinzb{background-color:#eab322;}</style><div class="css-5cinzb"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1qpd7ki">.css-1qpd7ki{background-color:#edb6bc;}</style><div class="css-1qpd7ki"></div><style data-emotion="css v3xncx">.css-v3xncx{background-color:#c6bdab;}</style><div class="css-v3xncx"></div><style data-emotion="css pzuliu">.css-pzuliu{background-color:#b5c9c0;}</style><div class="css-pzuliu"></div><style data-emotion="css 1bdiwya">.css-1bdiwya{background-color:#bddfd4;}</style><div class="css-1bdiwya"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 572a0c">.css-572a0c{background-color:#bfb3d7;}</style><div class="css-572a0c"></div><style data-emotion="css 1i7wo9f">.css-1i7wo9f{background-color:#f0d063;}</style><div class="css-1i7wo9f"></div><style data-emotion="css h5xxxp">.css-h5xxxp{background-color:#a5cee2;}</style><div class="css-h5xxxp"></div><style data-emotion="css 73e0u6">.css-73e0u6{background-color:#bea1a6;}</style><div class="css-73e0u6"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1pddqua">.css-1pddqua{background-color:#ff8b8b;}</style><div class="css-1pddqua"></div><style data-emotion="css 1fiwsxw">.css-1fiwsxw{background-color:#f9f7e8;}</style><div class="css-1fiwsxw"></div>
1<style data-emotion="css u21lgw">.css-u21lgw{background-color:#b6e4e4;}</style><div class="css-u21lgw"></div><style data-emotion="css 8o61hc">.css-8o61hc{background-color:#61bfad;}</style><div class="css-8o61hc"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 12q2b8n">.css-12q2b8n{background-color:#f4f1c8;}</style><div class="css-12q2b8n"></div><style data-emotion="css qbis3a">.css-qbis3a{background-color:#e8a7df;}</style><div class="css-qbis3a"></div><style data-emotion="css ojtlqp">.css-ojtlqp{background-color:#cdf4c7;}</style><div class="css-ojtlqp"></div><style data-emotion="css o21wnu">.css-o21wnu{background-color:#a6e4e3;}</style><div class="css-o21wnu"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1sge8f">.css-1sge8f{background-color:#e5ddc8;}</style><div class="css-1sge8f"></div><style data-emotion="css 14ifpus">.css-14ifpus{background-color:#4391c1;}</style><div class="css-14ifpus"></div><style data-emotion="css 18vr7g2">.css-18vr7g2{background-color:#e6b840;}</style><div class="css-18vr7g2"></div><style data-emotion="css 1ffvzh4">.css-1ffvzh4{background-color:#d7e4d2;}</style><div class="css-1ffvzh4"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 1xa6jm0">.css-1xa6jm0{background-color:#31b77a;}</style><div class="css-1xa6jm0"></div><style data-emotion="css 4l9utz">.css-4l9utz{background-color:#efe9d9;}</style><div class="css-4l9utz"></div><style data-emotion="css 1j4x638">.css-1j4x638{background-color:#fbcbbf;}</style><div class="css-1j4x638"></div><style data-emotion="css wbvk1j">.css-wbvk1j{background-color:#cfecf4;}</style><div class="css-wbvk1j"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 3dzxiu">.css-3dzxiu{background-color:#a5c1e6;}</style><div class="css-3dzxiu"></div><style data-emotion="css t9ykfh">.css-t9ykfh{background-color:#e6bca4;}</style><div class="css-t9ykfh"></div><style data-emotion="css 1ff932q">.css-1ff932q{background-color:#cbe5a4;}</style><div class="css-1ff932q"></div><style data-emotion="css mrafh3">.css-mrafh3{background-color:#bebfb9;}</style><div class="css-mrafh3"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css 7a0il0">.css-7a0il0{background-color:#c6f6d5;}</style><div class="css-7a0il0"></div><style data-emotion="css h0fd9o">.css-h0fd9o{background-color:#feebc8;}</style><div class="css-h0fd9o"></div><style data-emotion="css 876oqc">.css-876oqc{background-color:#bee3f8;}</style><div class="css-876oqc"></div><style data-emotion="css x34wze">.css-x34wze{background-color:#fed7e2;}</style><div class="css-x34wze"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css wzmnjm">.css-wzmnjm{background-color:#ff5d12;}</style><div class="css-wzmnjm"></div><div class="css-et5fop"></div><div class="css-7ocin2"></div><style data-emotion="css nvvd5">.css-nvvd5{background-color:#ffeee6;}</style><div class="css-nvvd5"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css xpf2tl">.css-xpf2tl{background-color:#6f5cf1;}</style><div class="css-xpf2tl"></div><style data-emotion="css tmpn0v">.css-tmpn0v{background-color:#c5bcff;}</style><div class="css-tmpn0v"></div><style data-emotion="css 1p6bzpf">.css-1p6bzpf{background-color:#dbd6ff;}</style><div class="css-1p6bzpf"></div><style data-emotion="css 1cj54se">.css-1cj54se{background-color:#f0eefe;}</style><div class="css-1cj54se"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css vuxf5y">.css-vuxf5y{background-color:#0e62f1;}</style><div class="css-vuxf5y"></div><style data-emotion="css 1s0h084">.css-1s0h084{background-color:#a3c5ff;}</style><div class="css-1s0h084"></div><style data-emotion="css 13y0lqd">.css-13y0lqd{background-color:#ccdfff;}</style><div class="css-13y0lqd"></div><style data-emotion="css r0zp4g">.css-r0zp4g{background-color:#eef4fe;}</style><div class="css-r0zp4g"></div></div></div><div class="css-1pvnel6"><div class="css-1w5j5vy"><style data-emotion="css une8ux">.css-une8ux{background-color:#9e9fc1;}</style><div class="css-une8ux"></div><style data-emotion="css 1thuwke">.css-1thuwke{background-color:#c8a0be;}</style><div class="css-1thuwke"></div><style data-emotion="css ri0b3b">.css-ri0b3b{background-color:#b2a697;}</style><div class="css-ri0b3b"></div><style data-emotion="css 7a3rxu">.css-7a3rxu{background-color:#60b9c7;}</style><div class="css-7a3rxu"></div></div></div></div><style data-emotion="css 18yp5i7">.css-18yp5i7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;
1-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:240px;position:fixed;right:0px;top:80px;bottom:0px;background-color:var(--chakra-colors-white);padding:40px;row-gap:10px;box-shadow:5px 12px 20px rgba(36, 37, 38, 0.25);overflow:auto;}.css-18yp5i7>*:not(style)~*:not(style){margin-top:0.5rem;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;}@media screen and (min-width: 30em){.css-18yp5i7{row-gap:15px;}}@media screen and (min-width: 48em){.css-18yp5i7{row-gap:18px;}}@media screen and (min-width: 62em){.css-18yp5i7{row-gap:20px;}}@media screen and (min-width: 80em){.css-18yp5i7{row-gap:25px;}}@media screen and (min-width: 96em){.css-18yp5i7{row-gap:40px;}}</style><div class="chakra-stack css-18yp5i7"><style data-emotion="css 11poapq">.css-11poapq{border-radius:8px;background-color:var(--chakra-colors-white);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;box-shadow:1px 1px 12px rgba(36, 37, 38, 0.25);row-gap:5px;padding-bottom:5px;min-height:100px;color:rgba(73, 80, 87, 1);font-size:14px;}</style><div class="css-11poapq"><style data-emotion="css 17d2lvs">.css-17d2lvs{background-color:#d5a09a;min-height:10px;width:100%;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><div class="css-17d2lvs"></div><style data-emotion="css 1lh9dei">.css-1lh9dei{cursor:pointer;border:1px solid #ebebeb;padding:5px;border-radius:4px;}</style><div class="css-1lh9dei">#d5a09a</div><div class="css-1lh9dei">rgb(213,160,154)</div></div><div class="css-11poapq"><style data-emotion="css zf6qep">.css-zf6qep{background-color:#f2dbd5;min-height:10px;width:100%;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><div class="css-zf6qep"></div><div class="css-1lh9dei">#f2dbd5</div><div class="css-1lh9dei">rgb(242,219,213)</div></div><div class="css-11poapq"><style data-emotion="css 1slr6fd">.css-1slr6fd{background-color:#eae3dd;min-height:10px;width:100%;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><div class="css-1slr6fd"></div><div class="css-1lh9dei">#eae3dd</div><div class="css-1lh9dei">rgb(234,227,221)</div></div><div class="css-11poapq"><style data-emotion="css 1a8nws">.css-1a8nws{background-color:#d8c1bb;min-height:10px;width:100%;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><div class="css-1a8nws"></div><div class="css-1lh9dei">#d8c1bb</div><div class="css-1lh9dei">rgb(216,193,187)</div></div></div></div></div><span></span></div>
1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"r_iZ1bi91xmbnCYz85_nU","assetPrefix":"/color-card","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.