All Web-apps
Palettico
Design
Start with one color, end with a full palette. Palettico generates your entire color system — brand tones, accents, and states — from a single input. Then, export your palette as SVG for Figma or grab the CSS variables to plug right into your code. Quick, smart, and perfectly balanced.
App Preview
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 2.857 0 C 1.281 0 0 1.281 0 2.857 L 0 17.143 C 0 18.719 1.281 20 2.857 20 L 17.143 20 C 18.719 20 20 18.719 20 17.143 L 20 2.857 C 20 1.281 18.719 0 17.143 0 Z M 3.08 7.598 L 6.049 7.598 L 6.049 17.143 L 3.08 17.143 Z M 6.281 4.576 C 6.281 5.527 5.513 6.295 4.563 6.295 C 3.612 6.295 2.844 5.527 2.844 4.576 C 2.844 3.625 3.612 2.857 4.563 2.857 C 5.513 2.857 6.281 3.625 6.281 4.576 Z M 14.192 17.143 L 14.192 12.5 C 14.192 11.393 14.17 9.969 12.652 9.969 C 11.107 9.969 10.871 11.174 10.871 12.42 L 10.871 17.143 L 7.906 17.143 L 7.906 7.598 L 10.75 7.598 L 10.75 8.902 L 10.79 8.902 C 11.188 8.152 12.156 7.362 13.598 7.362 C 16.598 7.362 17.156 9.339 17.156 11.911 L 17.156 17.143 Z" fill="rgb(0, 0, 0)" height="20px" id="nI7FUoXPE" transform="translate(2 2)" width="20px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 9.3 0 C 4.163 0 0 4.163 0 9.3 C 0 14.438 4.163 18.6 9.3 18.6 C 14.438 18.6 18.6 14.438 18.6 9.3 C 18.6 4.163 14.438 0 9.3 0 Z M 15.45 4.29 C 16.556 5.64 17.227 7.365 17.242 9.24 C 16.98 9.184 14.355 8.651 11.711 8.985 C 11.494 8.46 11.291 7.995 11.014 7.425 C 13.95 6.225 15.281 4.519 15.45 4.294 Z M 14.565 3.371 C 14.422 3.574 13.226 5.182 10.402 6.24 C 9.101 3.847 7.657 1.882 7.44 1.59 C 9.96 0.982 12.615 1.639 14.569 3.371 Z M 5.921 2.122 C 6.131 2.411 7.549 4.376 8.865 6.716 C 5.149 7.702 1.875 7.687 1.522 7.684 C 2.036 5.22 3.697 3.169 5.921 2.122 Z M 1.357 9.311 C 1.357 9.229 1.357 9.15 1.361 9.067 C 1.71 9.075 5.557 9.124 9.525 7.939 C 9.754 8.385 9.971 8.835 10.17 9.285 C 7.297 10.095 4.687 12.416 3.401 14.621 C 2.134 13.211 1.357 11.351 1.357 9.311 Z M 4.425 15.577 C 5.254 13.882 7.507 11.692 10.71 10.597 C 11.824 13.496 12.285 15.926 12.405 16.62 C 9.851 17.707 6.78 17.411 4.425 15.574 Z M 13.74 15.896 C 13.657 15.412 13.237 13.087 12.195 10.234 C 14.685 9.836 16.871 10.489 17.141 10.575 C 16.789 12.784 15.517 14.692 13.736 15.9 Z" fill="rgb(0, 0, 0)" height="18.599999999999994px" id="FDJfVDwST" transform="translate(2.7 2.7)" width="18.599999999999994px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 13.852 0 C 15.48 0 16.8 1.32 16.8 2.947 L 16.8 6.09 C 16.729 6.086 16.657 6.082 16.586 6.082 L 16.571 6.082 C 16.196 6.082 15.735 6.172 15.405 6.337 C 15.03 6.51 14.704 6.769 14.43 7.11 C 13.987 7.657 13.721 8.396 13.657 9.225 C 13.654 9.251 13.654 9.274 13.65 9.3 C 13.646 9.326 13.646 9.345 13.646 9.371 C 13.642 9.416 13.642 9.461 13.642 9.506 C 13.642 9.577 13.639 9.649 13.642 9.724 C 13.687 11.602 14.7 13.106 16.504 13.106 C 16.605 13.106 16.702 13.102 16.8 13.091 L 16.8 13.856 C 16.8 15.484 15.48 16.804 13.852 16.804 L 2.947 16.8 C 1.32 16.8 0 15.48 0 13.852 L 0 2.947 C 0 1.32 1.32 0 2.947 0 Z M 3.086 4.009 L 3.097 4.013 C 3.592 4.125 3.84 4.29 3.84 4.89 L 3.84 11.91 C 3.84 12.51 3.589 12.675 3.094 12.788 L 3.082 12.791 L 3.082 12.896 L 5.062 12.896 L 5.062 12.791 L 5.051 12.788 C 4.556 12.675 4.305 12.51 4.305 11.91 L 4.305 5.299 L 7.534 12.893 L 7.717 12.893 L 11.04 5.085 L 11.04 12.083 C 10.999 12.555 10.747 12.701 10.301 12.803 L 10.29 12.806 L 10.29 12.908 L 13.736 12.908 L 13.736 12.806 L 13.725 12.803 C 13.279 12.701 13.024 12.555 12.979 12.083 L 12.975 4.89 L 12.979 4.89 C 12.979 4.29 13.23 4.125 13.725 4.013 L 13.736 4.009 L 13.736 3.908 L 11.029 3.908 L 8.516 9.81 L 6.004 3.908 L 3.086 3.908 Z M 16.8 11.561 C 15.859 11.284 15.188 10.245 15.255 9.019 L 15.255 9.019 L 16.796 9.019 L 16.796 11.561 Z M 16.56 6.476 C 16.646 6.476 16.725 6.487 16.8 6.51 L 16.8 8.662 L 15.293 8.662 C 15.349 7.402 15.803 6.491 16.56 6.476 Z" fill="rgb(0, 0, 0)" height="16.803750000000008px" id="hJbYoYIUX" transform="translate(3.6 3.6)" width="16.80000301949815px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 1.8 0 C 0.806 0 0 0.806 0 1.8 C 0 2.366 0.266 2.899 0.72 3.24 L 8.52 9.09 C 9.161 9.57 10.039 9.57 10.68 9.09 L 18.48 3.24 C 18.934 2.899 19.2 2.366 19.2 1.8 C 19.2 0.806 18.394 0 17.4 0 Z M 0 4.95 L 0 12 C 0 13.324 1.076 14.4 2.4 14.4 L 16.8 14.4 C 18.124 14.4 19.2 13.324 19.2 12 L 19.2 4.95 L 11.76 10.53 C 10.481 11.49 8.719 11.49 7.44 10.53 Z" fill="rgb(0, 0, 0)" height="14.400003051757778px" id="cPCyOUUsV" transform="translate(2.4 4.8)" width="19.199999999999996px"/></svg>)
Design that goes beyond aesthetics—crafted with purpose and precision.
