Ion input type="color" on iOS showing old colour picker


I want to use a colour picker in an app where the user can choose colours for the background of ion cards. The colours are saved on the server in a database. I used the input type type=color and it works for both iOS and Android but I am not sure how I can choose which type of native colour picker is chosen. I started a blank app with just an input to show what I mean.

<input type="color"/>

I tried to use <ion-input type="color"></ion-input> but the formatting is weird even if wrapped in an ion-item.

This is what i get when used in the test app

Here is the expected colour picker

On Android I get this colour picker which can be expanded, it will then show a version with more precise inputs.

I am not sure how I can get the colour picker for iOS which lets the user do the same precise inputs as seen on the Android version.

Is there a Capacitor or Cordova Plugin that I have to use to achieve this? Maybe there is a npm package that shows the same inputs for both iOS and Android?