Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint Colors Color schemes. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application.
Blueprint Colors Schemes:
- Sequential color schemes: This color scheme is best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
- Diverging color schemes: This color scheme put equal weightage on the mid-range and extreme values at both ends of the data range.
- Qualitative color schemes: This color scheme uses a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.
Syntax:
<div style={{ backgroundColor: "#2D72D2" }}>...</div>
<h3 style={{ color: "#77450D" }}>...</h3>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
 
Example 1: Below example demonstrates the usage of the Sequential Color Scheme.
Javascript
| import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css";  functionApp() {     return(         <>             <div style={{ padding: 20, textAlign: "center",                  color: "green"}}>                 <h1>ReactJS BluePrint Colors Color schemes</h1>             </div>             <div>                 <h2 style={{ textAlign: "center",                      color: "green"}}>                     Sequential Color Scheme                 </h2>                 <div style={{ padding: 20, display: "flex",                     flexDirection: "row"}}>                     <div style={{ padding: 10 }}>                         <div style={{ backgroundColor: "#CFF3D2",                             padding: 20 }}>                            #CFF3D2                         </div>                         <div style={{ backgroundColor: "#8BCDBC",                             padding: 20 }}>                            #8BCDBC                         </div>                         <div style={{ backgroundColor: "#59A3AC",                             padding: 20 }}>                            #59A3AC                         </div>                         <div style={{ backgroundColor: "#3878A1",                             padding: 20 }}>                            #3878A1                         </div>                         <div style={{ backgroundColor: "#1F4B99",                             padding: 20 }}>                            #1F4B99                         </div>                     </div>                     <div style={{ padding: 10 }}>                         <div style={{ backgroundColor: "#97F3EB",                             padding: 20 }}>                            #CFF3D2                         </div>                         <div style={{ backgroundColor: "#78D5CC",                             padding: 20 }}>                            #8BCDBC                         </div>                         <div style={{ backgroundColor: "#58B8AE",                             padding: 20 }}>                            #59A3AC                         </div>                         <div style={{ backgroundColor: "#369C91",                             padding: 20 }}>                            #3878A1                         </div>                         <div style={{ backgroundColor: "#008075",                             padding: 20 }}>                            #1F4B99                         </div>                     </div>                 </div>             </div>         </>     ); }  export defaultApp; | 
Output:
 
Example 2: Below example demonstrates the usage of the Diverging Color Scheme.
Javascript
| import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css";  functionApp() {     return(         <>             <div style={{                 padding: 20, textAlign: "center",                 color: "green"            }}>                 <h1>ReactJS BluePrint Colors Color schemes</h1>             </div>             <div>                 <h2 style={{ textAlign: "center", color: "green"}}>                     Diverging Color Scheme                 </h2>                 <div style={{                     padding: 20, display: "flex",                     flexDirection: "row"                }}>                     <div style={{                         display: 'flex', flexDirection: 'column',                         paddingRight: 10                     }}>                         <div style={{                             backgroundColor: '#1F4B99',                             padding: 20,                             color: 'white'                        }}>                            #1F4B99                         </div>                         <div style={{                             backgroundColor: '#6CACB9', padding: 20,                             color: 'white'                        }}>                            #6CACB9                         </div>                         <div style={{                             backgroundColor: '#FFFFFF', padding: 20,                             color: 'black'                        }}>                            #FFFFFF                         </div>                         <div style={{                             backgroundColor: '#DF9563', padding: 20,                             color: 'white'                        }}>                            #DF9563                         </div>                         <div style={{                             backgroundColor: '#9E2B0E', padding: 20,                             color: 'white'                        }}>                            #9E2B0E                         </div>                     </div>                     <div style={{                         display: 'flex', flexDirection:                             'column', paddingRight: 10                     }}>                         <div style={{                             backgroundColor: '#1D7324',                             padding: 20, color: 'white'                        }}>                            #1D7324                         </div>                         <div style={{                             backgroundColor: '#8BAE44',                             padding: 20, color: 'white'                        }}>                            #8BAE44                         </div>                         <div style={{                             backgroundColor: '#FFE39F',                             padding: 20, color: 'white'                        }}>                            #FFE39F                         </div>                         <div style={{                             backgroundColor: '#6B9FA1',                             padding: 20, color: 'white'                        }}>                            #6B9FA1                         </div>                         <div style={{                             backgroundColor: '#1F4B99',                             padding: 20, color: 'white'                        }}>                            #1F4B99                         </div>                     </div>                 </div>             </div>         </>     ); }  export defaultApp; | 
Output:
 
Example 3: Below example demonstrates the usage of the Qualitative Color Scheme.
Javascript
| import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css";  functionApp() {     return(         <>             <div style={{ padding: 20, textAlign: "center",                 color: "green"}}>                 <h1>ReactJS BluePrint Colors Color schemes</h1>             </div>             <div>                 <h2 style={{ textAlign: "center", color: "green"}}>                     Qualitative Color Scheme                 </h2>                 <div style={{ padding: 20, display: "flex",                      flexDirection: "row"}}>                     <div                         style={{ backgroundColor: "#147EB3",                          padding: 20, color: "white"}}                     >                        #147EB3                     </div>                     <div                         style={{ backgroundColor: "#29A634",                         padding: 20, color: "white"}}                     >                        #147EB3                     </div>                     <div                         style={{ backgroundColor: "#D1980B",                          padding: 20, color: "white"}}                     >                        #D1980B                     </div>                     <div                         style={{ backgroundColor: "#D33D17",                          padding: 20, color: "white"}}                     >                        #D33D17                     </div>                     <div                         style={{ backgroundColor: "#9D3F9D",                          padding: 20, color: "white"}}                     >                        #9D3F9D                     </div>                 </div>             </div>         </>     ); }  export defaultApp; | 
Output:
 
Reference: https://blueprintjs.com/docs/#core/colors.color-schemes









