top of page
Orange Clouds

Color Translator

Icon-1024 (3).png

Translate Distinct Color for Your Own App

Color Translator is an app that helps users identify and match colors to UI Color values in Swift. Designed to help IOS app developers select distinct colors for their apps, Color Translator enables users to input UI Color values, adjust them based on the wanted color, and view the selection based on the background color as it changes in real-time.

Screenshots of Color Translator

Pink Clouds
图片 1.png
图片 2.png
图片 3.png
图片 4.png

Key Features

  • Input text fields that allow users to enter UI Color values

  • Changed Background color according to UI Color Values entered by users

  • Localization in English and French


Inspiration of Designing Color Translator

As a front-end developer, when I tried to decide the colors for my website or app, I often can't find the color that matches my design because of the limited color selection in the software. Through this “Color Translator”, users, mainly front-end developers, and designers, can choose their own input color value, through constant adjustment to get their favorite color.

Since this software is based on the function of UI color, users can enter their designed red, green, blue values, click “Translate” button, and preview the color by looking at the color of the background. To be more specific, the initial background color is dark red (I designed and translated it with this app), and it will change after the user enter the input and click “Translate” button.


The required range the input is from 0 to 255. If the user’s input does not belong to this range, the background color will change to black for reminder. Also, when users enter the values in the input text field, the number pad keyboard will automatically pop up. After user finish entering, they can tap on the any area inside the view besides the “Color Translator” label, Input text fields, and “Translate” button to make the keyboard disappear, and the background color will change to brown indicating that the input process is finished.

bottom of page