LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Learn Section
Learn Section
  • Introduction
  • Getting Started
    • Finding your way around
    • Core concepts
      • Data Binding
      • Data Insertion
      • Dynamic Visibility
    • Creating and managing projects
      • Creating a Project
      • Saving a Project
      • Opening a Project
      • Version History
    • Templates
  • Components
    • Overview
    • Layout & Positioning
    • Charts
      • Line Chart
      • Column Chart
      • Bar Chart
      • Pie Chart
      • Combination Chart
      • Area Chart
      • Spline Chart
      • Step Chart
    • DataViz
      • Gauge
      • Word Cloud
      • Chord Diagram
      • Sankey Diagram
      • Schedule (Gantt)
      • Metric Tile
      • Progress Bar
      • Trend Icon
      • Mapbox
      • Loading Animation
    • Tables
      • Scorecard
      • Data Table
    • Controls
      • Push Button
      • Dropdown
      • Multi Select Dropdown
      • Listbox
      • Label Based Menu
      • Checkbox
      • Radio Button
      • Slider
      • Value Input
      • Print Button
      • URL Button
      • Screenshot
      • Hotspot
      • Date Picker
      • Toggle Switch
      • Scenario
    • Text
      • Text Label
      • Text Input
      • Text Area
    • Shapes
      • Rectangle
      • Ellipse
      • Line
    • Media
      • Image
      • Icon
    • Containers
      • Container
      • Web View
      • Repeat Container
      • Row Layout
      • Column Layout
  • Functions
    • Overview
    • Data Mover
    • External Parameters
    • Export to Excel
    • Export to PDF
    • Timer
    • Tableau Parameters
    • Browser Info
    • TextJoin
    • Unique List
  • Connections
    • Overview
    • Excel One Drive
      • Excel One Drive Read
      • Excel One Drive Writeback
    • Google Sheets
      • Google Sheets Read
      • Google Sheets Writeback
    • Ninox Connections
    • Smartsheets
    • CSV Connector
    • SAP Webi Connector
    • XDC Connections
    • Database Connections
    • Zapier Trigger
  • Spreadsheet
    • Overview
    • Spreadsheet functionality
    • Supported Spreadsheet Functions
    • Spreadsheet performance
  • Best practices for the Squirrel spreadsheet
  • Publishing & Sharing
    • Overview
    • Project Settings
    • Publishing to Squirrel Cloud
    • Publishing Locally
    • Using the Project Manager
    • Adding projects to PowerPoint
    • Adding projects to Tableau
    • Progressive Web Apps (PWA)
  • SETTINGS
    • Image Library
    • Custom Fonts
  • Account Management
    • Manage your account Profile
    • Understanding your Squirrel plan usage
    • Changing your Plan
    • Billing
    • How do I delete my account?
  • Frequent Questions
    • What data do you keep and for how long?
  • How-Tos
    • Overview
    • Add-ons
      • Add-on Documentation
      • Window Size – Add responsive behavior to your components
      • Window Size - Getting responsive behavior in the canvas
    • Adding your own Google Fonts
    • Chart title and Checkbox label text case formatting
    • Deleting functions and connections
    • Find & Replace Fonts
    • Getting a Mapbox API access token
    • Renaming a component, function or connection
    • Seeing Data from a Connector at Design time
    • Troubleshooting Projects in the Console
    • Using colors and color values
  • Tutorials
    • Create a temperature conversion app
    • Create a revenue growth app from an existing spreadsheet
    • Whack-A-Squirrel Game
    • Filtered Rows Insertion: Building a Filtered Selection
Powered by GitBook
On this page
  • Color picker
  • Colour name
  • Hex value
  • RGB value
  • HSL value
  • Alternative formats

Was this helpful?

  1. How-Tos

Using colors and color values

PreviousTroubleshooting Projects in the ConsoleNextCreate a temperature conversion app

Last updated 11 months ago

Was this helpful?

LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

In Squirrel you can set a color property by using the color picker property or it to a color value in the spreadsheet. This article will describe how colors can be applied to a project.

Color picker

The color picker is the quickest and most common way to apply colors.

Selecting the color picker icon beside any color property will bring up the color picker panel. The panel consists of a few sections:

  • Color plane - the selection area. Click and drag around the space to select

  • Hue slider - a slider to select the current hue on the color plane

  • Opacity Slider and Input - a slider (or input) to select the opacity of the selected color

  • Hex input - an input to enter the desired color. This cannot be bound to the spreadsheet

  • Recent colors - a library of recently selected and used colors. This updates once a color has been selected and the panel closes.

It is worth noting, that if a color is bound to the spreadsheet, the color picker panel is disabled and will not open.

Colour name

A descriptive color name can be used e.g. red, green, blue, hotpink, mediumseagreen.

The advantage of using color names is that you can see at a glance what the color will be, in a project where several color values are listed in the spreadsheet, this can be very useful. There are 140 color names that you can use that are supported by modern browsers, click on the following links for a full list:

Hex value

A Hex value is written as follows:

Starting with a hashtag (#) and then followed by pairs of letters or numbers that represent the red, green, and blue values. Each color is defined by a value between 00 and FF, where a number is used to represent a value of 1 to 9, and the letters A to F represent a value of 10 to 15 (where A=10, B=11, and so on).

If you use the color picker in the property panel, the color that you choose will be represented by a Hex value in the property field:

Hex color values are supported by all browsers.

RGB value

An RGB (Red, Green, Blue) color value should be written as follows:

Where the three red, green, and blue values, each ranging from 0 to 255, combine to produce the desired color. A value of 0 means that none of the colors is being used, whereas a value of 255 means that all of that color is being used.

RGB color values are entered into the spreadsheet as text not as an expression and therefore should not have an = before the value. If you want to generate a color value from data in the spreadsheet, use a formula similar to this:

="RGB(" & C2 & "," & C3 & "," & C4 & ")"

RGB color values are supported by all major browsers.

HSL value

A HSL (Hue, Saturation, Lightness) color value should be written as follows:

The hue value is the representation of a degree on a color wheel, ranging from 0 to 360, where 0 is red, 120 is green and 240 is blue. The saturation value is a percentage, where 0% is full grey, but 100% is full color. The lightness value is also a percentage, where 0% would cause it to be black, 100% would cause it to be white, but 50% would mean that the color was unaffected by lightness either way.

Percentage values can also be written as decimals e.g. 0.5 (50%)

HSL color values are entered into the spreadsheet as text not as an expression and therefore should not have an = before the value. If you want to generate a color value from data in the spreadsheet, use a formula similar to this:

="HSL(" & C2 & "," & C3 & "," & C4 & ")"

HSL color values are supported by most major browsers.

Alternative formats

RGBA and HSLA color value formats can also be used but the alpha/opacity value will be ignored as opacity is controlled by a separate property in Squirrel.

More details on HSL colors can be found at .

There are three other valid options (HWB, CMYK, and NCOL) but these are much less widely used, more details on these, and all the above methods can be found .

https://www.rapidtables.com/web/css/css-color.html
https://www.w3schools.com/cssref/css_colors.asp
https://www.w3schools.com/css/css_colors_hsl.asp
here
binding