Topview Logo
  • Create viral videos with
    GPT-4o + Ads library
    Use GPT-4o to edit video empowered by Youtube & Tiktok & Facebook ads library. Turns your links or media assets into viral videos in one click.
    Try it free
    gpt video

    How I make UI color palettes

    blog thumbnail

    How I Make UI Color Palettes

    Jordan, a product designer, shares his efficient and repeatable process for creating UI color palettes in this article. He outlines a step-by-step guide and provides valuable tips for working with colors, from determining brand colors to creating supporting colors and neutrals. Let's delve into the five steps involved in crafting a cohesive color palette for UI design.

    First, let's talk about what we're going to need. UI color palettes typically consist of three categories: brand colors, supporting colors, and neutrals. Brand colors are crucial as they define the overall look and feel of the interface. Supporting colors are used strategically to draw attention or convey messages, while neutrals form the backbone of the UI design.

    Step one is to find a starting point, usually the brand color, which serves as a foundation for the palette. Step two involves selecting supporting colors that complement the brand color. Step three focuses on creating a range of shades for each color, ensuring consistency and versatility in design. Step four entails establishing a set of neutrals to balance out the palette. Finally, step five emphasizes the importance of testing the colors in actual designs and making necessary tweaks for cohesion and aesthetics.

    By following this systematic approach, designers can develop harmonious and functional color palettes that enhance the user experience and visual appeal of the UI.


    • UI color palettes
    • Brand colors
    • Supporting colors
    • Neutrals
    • HSB
    • Color Picker
    • Shades
    • Saturation
    • Brightness
    • Cohesiveness


    • How many categories are typically found in UI color palettes?
    • Why is the brand color considered the starting point for creating a color palette?
    • What role do supporting colors play in UI design?
    • Why is HSB preferred over hex or RGB values for creating color palettes?
    • How important is it to test color palettes in actual designs before finalizing them?

    One more thing

    In addition to the incredible tools mentioned above, for those looking to elevate their video creation process even further, stands out as a revolutionary online AI video editor. provides two powerful tools to help you make ads video in one click.

    Materials to Video: you can upload your raw footage or pictures, will edit video based on media you uploaded for you.

    Link to Video: you can paste an E-Commerce product link, will generate a video for you.

    You may also like